CSS3 アニメーションについてのメモ

CATEGORY: HTML/CSS | TAG: Compass, Sass, アニメーション

2014年4月3日

CSS3 アニメーションに関する個人的なメモ。

CSS3でアニメーションを実装する方法は以下の2種類がある。

transition プロパティでの定義
animation プロパティでの定義

Transition

始点終点の2点間のアニメーション機能を提供
（始点から終点までの2点間のアニメーションしか行えない：設定がシンプル）
設定時間の中でアニメーション中の変化を自動的に設定し、終了後に自動で逆のアニメーションで元に戻る（hover で動かすロールオーバーなどが簡単に設定できる）
ループの設定不可

Animation

設定時間の中で開始・終了するタイミングや値の変化具合などを細かく設定でき複雑なアニメーションを実現可能
アニメーション中のキーフレーム（keyframes）と呼ばれる任意の点ごとに CSS のプロパティ値を指定することで様々なプロパティの値を連続的に変化させていくことが可能
hover で動かすとマウスアウトするとすぐに初期状態に戻る（これは、animation-play-state プロパティを設定することで回避できる）
ループの設定可能
:hover などのきっかけがなくても実行可能

transition の設定方法

Transition によるアニメーションでは、開始時と終了時における状態（のプロパティの値）を指定

開始時と終了時を定義する方法には、次の二種類ある。

hover などの擬似クラスを使用する
javascript を使用して、CSS のプロパティを変更する（後述）

transition を使った簡単なロールオーバー

基本的な構成

要素の初期状態の CSS の設定を記述し、そこに transition プロパティを指定
その要素の hover などの擬似クラスにアニメーション実行後の状態の CSS の設定を記述

.sample {
  /* 初期状態の CSS の設定 */
  /* transition プロパティの指定 */  
}

.sample:hover {
  /* アニメーション実行後の状態の CSS の設定 */
}

簡単なロールオーバーの例

以下は、マウスオーバーすると背景色と文字色を1秒かけて変える例。

background が「white」から「#333」に1秒かけて変化
color が「#333」から「white」に1秒かけて変化

/* 初期状態の CSS の設定 */
.sample {
  border: 1px solid #CCC;
  padding: 10px 20px;
  background: white;
  color:#333;
  /* transition プロパティの指定 */
  transition: 1s;
}

/* アニメーション実行後の状態の CSS の設定 */
.sample:hover {
  background: #333;
  color: white;
}

サンプル

transition を定義する際に指定する項目

transitionでアニメーションを定義する場合、以下の４項目を指定することができる。

transition-property : トランジションを適用する対象の CSS プロパティの名前を指定
transition-duration : トランジションにかかる時間
transition-timing-function : トランジションの速度変化（イージング : タイミング関数）
transition-delay : トランジションを開始するまでの時間（遅延時間）

これらの項目は transition プロパティでまとめて定義することも、個別に設定することも可能。

個別に指定する方法

transition-property: 対象のプロパティの名前;
transition-duration: アニメーションにかかる時間;
transition-timing-function: イージング;
transition-delay: 遅延時間;

transition-property: background;
transition-duration:1s;
transition-timing-function:ease-out;
transition-delay:0.5s;

対象プロパティを複数指定した場合

transition-property で複数の CSS プロパティを指定した場合、そのそれぞれに transition-duration など他のプロパティの値をコンマ区切りで指定可能

transition-property: color, background-color;
transition-duration: 1s, 2s;
transition-delay: 0s, 1s;

上記の場合、color が1秒間で変化し、その後（background-color の遅延時間が1秒） background-color が2秒間で変化する。

プロパティの数と設定の数が合わない場合

足らない場合 → 指定された分がセットで繰り返される

transition-property: opacity, left, top, height;
transition-duration: 1s, 2s;

//以下と同じ
transition-property: opacity, left, top, height;
transition-duration: 1s, 2s, 1s, 2s;

多い場合 → 余りは切り捨てられる

transition-property: width, color;
transition-duration: 1s, 2s, 1s, 2s;

//以下と同じ
transition-property: width, color;
transition-duration: 1s, 2s;

まとめて指定する方法

transition: 対象のプロパティアニメーションにかかる時間イージング遅延時間;
(transition: transition-property transition-duration transition-timing-function transition-delay;)

まとめて指定する例

transtion: background-color 0.5s linear 1s;

各プロパティは順不同で記載することが可能
但し、アニメーションにかかる時間と遅延時間の順序だけは逆にすることができない
各プロパティは省略可能で、省略した場合の初期値は以下の表のデフォルト値になる

複数の設定の適用

複数の設定をカンマ区切りで同時に指定することも可能

transition-property のターゲットごとにカンマ区切りで指定

transition: width 1s ease 0s, height 1s ease-in 1s;

上記の場合、width が1秒間で変化し、その後（height の遅延時間が1秒） height が1秒間で変化する。

transition プロパティ
指定する項目	意味と使用例	デフォルト値
transition-property	アニメーションさせる対象の CSS プロパティ背景色、文字のサイズ等、どの CSS プロパティを変化させるか（カンマ区切りで複数指定可能）ここに指定したプロパティだけが、トランジションによりアニメーションする。通常、それ以外のプロパティの変更は即座に反映される（例）transition-property: background;	all（すべての要素を対象）
transition-duration	アニメーションにかかる時間開始時の状態から終了時の状態に変化するのに何秒かけるか秒単位(s)、もしくはミリ秒単位(ms)で指定単一の値を指定すると、すべてのプロパティのトランジションの所要時間として適用される。複数の値を指定すると、プロパティごとにトランジションの所要時間として異なる値を指定することができる。（例）transition-duration:1s;	0 秒（アニメーションなしで瞬時に変化）
transition-timing-function	アニメーションの速度変化（タイミング関数：イージング）（例）transition-timing-function:ease-out;	ease
transition-delay	アニメーションを開始するまでの時間（遅延時間）マウスオーバなどのアクションがあってから、何秒後にアニメーションを始めるか秒単位(s)、もしくはミリ秒単位(ms)で指定（例）transition-delay:0.3s;	0 秒（遅延無し）
transition	全ての項目をまとめて指定する。複数のプロパティ名の指定も可能 transition: アニメーションの時間対象のプロパティイージング遅延時間; （例）transtion: background-color 1s ease-out 0.3s; 各プロパティは順不同で記載することが可能だが、アニメーションにかかる時間と遅延時間の順序だけは逆にできない。各プロパティは省略可能で、省略した場合はデフォルト値が適用される

transition-timing-function で指定する値

アニメーションの速度変化（タイミング関数：イージング）は以下の値を設定することが可能。この他に、cubic-bezier 関数を使って、イージングを独自に設定することも可能

参考：
animation-timing-function(MDN)
timing-function/タイミング関数(MDN)

transition-timing-function で指定する値
既定値	意味・内容
ease	ゆっくり入り、加速し、ゆっくり終わる（デフォルト） cubic-bezier(0.25, 0.1, 0.25, 1.0)
linear	一定の速度（等速直線運動） cubic-bezier(0.0, 0.0, 1.0, 1.0)
ease-in	ゆっくり入り、加速して終わる cubic-bezier(0.42, 0, 1.0, 1.0)
ease-out	速く入り、ゆっくり終わる cubic-bezier(0, 0, 0.58, 1.0)
ease-in-out	easeよりも、ゆっくり入り、加速し、ゆっくり終わる cubic-bezier(0.42, 0, 0.58, 1.0)
step-start	開始時点で終了状態の値に変化する。steps(1, start)と同じ。
step-end	終了時点まで変化せず、終了時点で終了状態の値に変化する。steps(1, end)と同じ。
steps(ステップ数, ディレクション)	時間的変化を「ステップ数」の数のステップに等分に区切って不連続に変化させる。「ステップ数」は 1 以上の<整数値> で、ステップ関数を構成する等間隔の段数を示すもの。「ディレクション」にキーワード start が指定されると、アニメーションの開始時に最初のステップが発生する。キーワード end が指定された場合は、アニメーションの完了時に最後のステップが発生する。（animation と steps を使うとパラパラアニメのようなものが作れる。「css3で作るパラパラアニメ」）

ease と同じイージングを cubic-bezier 関数を使って設定する例

transition-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1.0) ;

以下のサイトでいろいろなイージングの中から好きなものを選択して、cubic-bezier 関数の値を取得することができる。

http://easings.net/ja

ベンダープレフィックス

CSS transition のプロパティは、ベンダープレフィックスなしで使用できるが、仕様が安定化したのは最近なので、一部のブラウザや古いバージョンのブラウザとの互換性のために依然としてベンダープレフィックスが必要。

ベンダープレフィックスの整理整頓（W3G) によると transition について以下のように書いてある。

SafariとiOSがごく最近からのサポートなのと、Androidがベンダー識別子なしのサポートは未だ無いので、transitionのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。

Sass を使ってベンダープレフィックスを自動で付与

Sass の @each を使ってベンダープレフィックスを自動で付ける方法。

Sass

$prefixList: -webkit-, -moz-, -ms-, -o-, null;

@mixin my_transition($value...) {
  @each $prefix in $prefixList {
    #{$prefix}transition: $value;
  }
}

変数（$prefixList）を使い付与したいベンダープレフィックスを宣言しておく。
ベンダープレフィックスなしのプロパティも生成されるように、リストの最後に「null」を入れて空文字にする。
不要なベンダープレフィックスは、リストから削除する。
複数の引数を取る可能性があるので可変長（…）にしておく

使用例（Sass）

$prefixList: -webkit-, -moz-, -ms-, -o-, null;
@mixin my_transition($value...) {
  @each $prefix in $prefixList {
    #{$prefix}transition: $value;
  }
}

.test {
  @include my_transition(background .5s linear 0.2s, border .3s linear .7s);
}

コンパイル結果（CSS）

.test {
  -webkit-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  -moz-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  -ms-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  -o-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
}

「-ms-transition」は不要？というかどこまで付けるかが悩むところ。

Compass の利用

Compass は transition のミックスインがあるのでそれを利用する。

Compass Transition

Sass

@import "compass";

.foo {
  @include transition-property(width);
  @include transition-duration(2s);
  @include transition-timing-function(ease-in);
  @include transition-delay(.2s);
}

.bar {
  @include transition(background .5s linear 0.2s, border .3s linear .7s);

}

コンパイル結果（CSS）

.foo {
  -webkit-transition-property: width;
  -moz-transition-property: width;
  -o-transition-property: width;
  transition-property: width;
  -webkit-transition-duration: 2s;
  -moz-transition-duration: 2s;
  -o-transition-duration: 2s;
  transition-duration: 2s;
  -webkit-transition-timing-function: ease-in;
  -moz-transition-timing-function: ease-in;
  -o-transition-timing-function: ease-in;
  transition-timing-function: ease-in;
  -webkit-transition-delay: 0.2s;
  -moz-transition-delay: 0.2s;
  -o-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.bar {
  -webkit-transition: background 0.5s linear, border 0.3s linear;
  -webkit-transition-delay: 0.2s, 0.7s;
  -moz-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  -o-transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
  transition: background 0.5s linear 0.2s, border 0.3s linear 0.7s;
}

ショートハンドの場合「-webkit-」は「-webkit-transition-delay」が別に出力されている。

transition の設定例

transition 関連のプロパティは、最初の状態を示す側に記述する。

以下は幅、高さ、ボーダーの幅と色、背景色（記述されているプロパティの全て：all）を 0.5 秒で変化させる例。

サンプル

/* 最初の状態（こちらに transition プロパティを記述） */
.transition1 {
    width: 120px;
    height: 30px;
    border: 1px solid #AF7374;
    background-color: #EDBABB;
    /* transition プロパティの指定 */ 
    transition: all .5s ease-in-out 200ms;
}

/* アニメーション実行後の状態 */
.transition1:hover {
    width: 300px;
    height: 60px;
    border: 5px solid #2C6E5A;
    background-color: #79B8AB;
}

「all」はデフォルトなので以下のように省略可能。

transition: .5s ease-in-out 200ms;

以下は「個別に指定する方法」で記述したもので内容は同じ。

.transition1 {
    width: 120px;
    height: 30px;
    border: 1px solid #AF7374;
    background-color: #EDBABB;
  
    transition-property: all; /* デフォルトなので省略可能 */
    transition-duration: 0.5s;
    transition-timing-function: ease-in-out;
    transition-delay: 0.2s;
}
 
.transition1:hover {
    width: 300px;
    height: 60px;
    border: 5px solid #2C6E5A;
    background-color: #79B8AB;
}

以下は最初に背景色を変化させ、次にボーダーの色を変化させる例。

背景色：遅延が0.2秒、アニメーション時間が0.5秒（計0.7秒）
ボーダーの色：遅延が0.7秒

サンプル

/* 初期状態 */
.transition2 {
  font-size: 30px;
  font-weight: bold;
  color: #666;
  text-align: center;
  line-height: 60px;
  height:60px;
  width: 200px;
  border: 2px solid #fff;
  background: #fff;
  transition: background .5s linear 0.2s, border .3s linear .7s;
}

/* アニメーション実行後の状態 */
.transition2:hover {
  background: #A1CFE9;
  border: 2px solid #999;
}

以下のように記述しても同じ。

.transition2 {
  font-size: 30px;
  font-weight: bold;
  color: #666;
  text-align: center;
  line-height: 60px;
  height:60px;
  width: 200px;
  border: 2px solid #fff;
  background: #fff;

  transition-property: background, border;
  transition-duration: .5s, .3s;
  transition-timing-function: linear;
  transition-delay: 0.2s, 0.7s;
}

.transition2:hover {
  background: #A1CFE9;
  border: 2px solid #999;
}

:hover の代わりに :active を使う

疑似クラス「:active」も CSS3 transition のトリガーに使える。
「:active」はマウスがクリック、またはマウスがダウンされた状態を表す。
但し、クリックは一瞬で終わるので、アニメーションの時間により、マウスを押し続ける必要がある。

サンプル

設定は単に「:hover」の代わりに「:active」を記述

#transition5 {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  background: #F1E9E9;
  border: 1px solid #F8DADB;
  transition: all 1s;
}

/* :active を指定 */
#transition5:active {
  width: 160px;
  height: 160px;
  border-radius: 80px;
  background: #EB0A0E;
  border: 5px solid #E4DD1A;
}

:focus

フォームのテキストボックスを選択したときに、背景色がアニメーションで変化するように設定する場合は、選択したときのデザインを :focus で指定しておく。

input {
  background-color: white;
  transition: 1s;
}

input:focus {
  background-color: yellow;
  outline: none;
}

クリックした際に CSS だけで実行させる方法

参考にさせていただいたサイト：CSS3だけでクリックでアニメーションさせる（webopixel）

クリックした場合にCSS3だけで transition を開始させる方法。一応こういう方法もあるというもので、現実的には jQuery を使った方が簡単だし、マークアップも簡潔でセマンティック。

クリックした要素自身をアニメーションするにはチェックボックスを使用して、transition を開始させたい要素を「label」で囲めばチェックボックスと連動する。

サンプル

HTML

<input type="checkbox" id="trigger">
<label for="trigger">
  <div id="pinkbox"></div>
</label>

CSS

#pinkbox {
  width: 30px;
  height: 30px;
  background: #EFCECF;
  border: 1px solid #C79A9B;
  margin-left: 0;
  transition: all 1s;
}

/* チェックボックス（input 要素）は非表示に */
#trigger {
  display: none;
}

/* アニメーション実行後の状態 */
#trigger:checked ~ label #pinkbox {
  margin-left: 200px;
  width: 100px;
  height: 50px;
  background: #F17C7E;
}

jQuery で transition を実行させる方法

CSS でアニメーション設定をしておき、jQuery で toggleClass() などを使ってコンテンツ要素に対してクラスを付けたり外したりしてアニメーションの制御を行う。

サンプル
HTML

<div id="transition3"></div>

CSS

/* 最初の状態に transition プロパティを記述 */
#transition3 {
  width: 50px;
  height: 50px;  
  transition: all 1s;
}

/* クラスをつけたものに設定してある値がアニメーション実行後の状態 */
#transition3.jq {
  width: 100px;
  height: 100px;  
}

jQuery

jQuery(function($){  
  $('#transition3').click(function(){
    $(this).toggleClass('jq');
  });
});

jQuery を使用して、クリックした位置にボールを移動させる例

サンプル

参考にしたサイト：CSS transition の使用（MDN）

HTML

<p>枠内でクリックした位置にボールが移動します。</p>
<div id="bar">
  <div id="foo"></div>
</div>

CSS

/* クリックする範囲を限定するための枠 */
#bar {
  position: relative;  /* #foo の基準位置 */
  margin: 20px 0;
  border: 1px solid #999;
  width: 600px;
  height: 400px;
  background-color: #e6fcfa;
}

/* ボールのアニメーションの指定（初期状態） */
#foo{
  border-radius:50px;
  width:50px;
  height:50px;
  background: #4C926C;
  position:absolute;
  top:0;
  left:0;  
  transition: all 1s;  
}

アニメーション実行後の動作（状態）は jQuery で記述（top と left を指定）

jQuery(function($){
  $('#bar').click(function(e){
    $('#foo').css({
      left: e.pageX - $(this).offset().left - 25 + 'px',
      top: e.pageY - $(this).offset().top - 25 + 'px'
    });
    return false;
  });
});

animation の設定方法

animation プロパティでは、キーフレームを利用したアニメーションを設定することができる。言い換えると animation プロパティを利用してアニメーションを行うには、キーフレームを作成する必要がある。

キーフレーム @keyframes

キーフレーム: 始点と終点の間に複数のアニメーションの変化の設定を記述するもの; 「@keyframes キーフレーム名 {…} 」という形で記述して作成する

@keyframes の中には始点と終点を含むキーフレームの設定を記述する
始点の設定は 0% {…} または from {…}に、終点の設定は 100% {…} または to{…} に記述
必要に応じて 1 ~ 99% のキーフレームを追加

@keyframes キーフレーム名 {
    0% { 始点のキーフレーム：アニメーションさせたいプロパティの初期状態 }
    100% { 終点のキーフレーム：アニメーションさせたいプロパティ最終状態 }
}

50% のキーフレームを追加した例

@keyframes キーフレーム名 {
        0% {
            background-color: #f00;    
        }
        50% {
            background-color: #0f0;
        }
        100% {
            background-color: #00f;
        }
    }

簡単なアニメーションの作成

見出し（h3 要素）にキーフレームの設定を適用してアニメーションを実行させる例。

HTML

<h3 id="anime1">H3 Animation Heading</h3>

アニメーション設定前の h3 要素（id=”anime1″）の CSS

#anime1 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
}

0%, 50%, 100% の3点における背景色（background-color）をそれぞれ水色、ピンク、オレンジに設定するキーフレームを作成

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

キーフレームの設定を見出し（この例の場合）に適用してアニメーションを実行するには、見出し要素（h3 id=”anime1″）に animation プロパティを指定する必要がある。

この例では単純にキーフレーム名（my_anime1）と再生時間（3s）を指定。

#anime1 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  /* animation プロパティを指定 */
  animation: my_anime1 3s;
}

以下のように animation プロパティのキーフレーム名と再生時間を個別に指定することも可能。

#anime1 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  /* animation プロパティを個別に指定 */
  animation-name: my_anime1;
  animation-duration: 3s;
}

サンプル

これでページを読み込むと同時にアニメーションの再生が始まり、キーフレームで指定したように見出しの背景色が変化する。

この例の場合、再生前は、animation プロパティを適用していない見出しの背景色の色（gray）は表示されず、0%で指定した色が表示される。

アニメーション終了後はこの設定の場合は animation プロパティを適用していない設定の色（gray）が表示される。これらの設定を変更することも可能（ディレイ中と再生後の表示を参照）。

カーソルに重ねたときに再生する

カーソルに重ねたときに再生するには、animation の設定を :hover に指定する。

HTML

<h3 id="anime1_hover">:hover H3 Animation Heading</h3>

CSS

#anime1_hover {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
}

/* animation プロパティを:hover に指定 */
#anime1_hover:hover {
  animation: my_anime1 3s;
  /* この場合同じキーフレームを使用 */
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

この場合、カーソルを外すと瞬時に背景色は animation プロパティを適用していない設定の色（gray）に戻る。（transition のように自動で逆のアニメーションで元に戻ることはない）

このため、この指定はあまりスムーズではないが、「アニメーションの再生・一時停止」のプロパティを利用することでスムーズなアニメーションを実現できる。

複数のプロパティの値の変更

キーフレームでは複数のプロパティの値を変更するように指定することも可能。

HTML

<h3 id="anime2">H3 Animation Heading 2</h3>

CSS

#anime2 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime2 3s;
}

@keyframes my_anime2 {
  0% {
    background-color: skyblue;
    /* プロパティの追加 */
    opacity: 0.1;
  }
  50% {
    background-color: pink;
    /* さらに別のプロパティの追加 */
    color:black;
    transform: rotate(60deg);
  }
  100% {
    background-color: orange;
    /* プロパティの追加 */
    opacity: 1.0;
  }
}

サンプル

上記の場合、
background-color → 0%: skyblue, 50%: pink, 100%: orange
opacity → 0%: 0.1, 100%: 1.0
color → 0%: white, 50%: black, 100%: white
transform → 0%: default, 50%: rotate(60deg), 100%: default

繰り返し/ ループ

標準ではアニメーションは1回で終了するが、animation または animation-iteration-count プロパティで繰り返す回数を指定できる。

回数の代わりに「infinite」を指定すると無限に繰り返すループ再生を行うことが可能。

HTML

<h3 id="anime3">H3 Animation Heading Repeat</h3>

CSS

#anime3 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime3 3s 5;
}

@keyframes my_anime3 {
  0% {
    background-color: skyblue;
    opacity: 0.3;
  }
  25% {
    background-color: yellow;
  }
  50% {
    background-color: pink;
  }
  75% {
    background-color: red;
  }
  100% {
    background-color: orange;
    opacity: 1.0;
  }
}

サンプル

再生の方向

標準ではアニメーションは始点から終点に向かって一方向に再生されるが、、animation または animation-direction プロパティの値を「alternate」と指定すると、再生と逆再生を交互に繰り返すようになる。

なお、逆再生の表示を確認するためには最低2回以上繰り返して表示する必要がある。

複数のキーフレームの適用

animation では複数のキーフレームの設定をカンマで区切って適用することができる。

以下の例では、背景色を変化させるキーフレーム「my_anime1」と文字の透明度を変化させるキーフレーム「my_text_anime1」を用意して、それぞれの再生時間や繰り返しの回数を変えて適用。

HTML

<h3 id="anime4">H3 Animation Heading Multi</h3>

CSS

#anime4 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s infinite, my_text_anime1 10s 1;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}


@keyframes my_text_anime1 {
  0% {
    color: rgba(0,0,0,0.00);
  }
  100% {
    color: rgba(0,0,0,1.00);
  }
}

サンプル

animation プロパティでは、キーフレームごとに再生に関する設定をカンマ区切りで指定。

「my_anime1」→ my_anime1 3s infinite
「my_text_anime1」」→ my_text_anime1 10s 1

プロパティを個別に指定する場合は以下のように記述できる。

#anime4 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation-name:my_anime1, my_text_anime1;
  animation-duration: 3s, 10s;
  animation-iteration-count: infinite, 1;
}

アニメーションの再生・一時停止

animation-play-state プロパティでは、アニメーションの再生と一時停止を指定することができる。（このプロパティはショートハンドの指定の中に書くとうまく動かないみたい。。。）

例えば、animation-play-state を「paused」に指定して一時停止させておき、その要素の「:hover」に「running」と指定することでカーソルを重ねるとアニメーションが再生するようにすることが可能。

HTML

<h3 id="anime5">H3 Animation Heading Paused</h3>

CSS

#anime5 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s infinite;
  animation-play-state: paused;
}

#anime5:hover {
  animation-play-state: running;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

サンプル

上記の場合、#anime5:hover を「running」と指定しているので、カーソルを重ねるとアニメーションが再生され、カーソルを外すと再生の途中で一時停止の状態になる。再びカーソルを重ねると、一時停止した個所から再生される。

ディレイ中と再生後の表示

animation-fill-mode はディレイ中と再生後の表示状態を指定することができる。

以下はアニメーションのディレイを5秒に再生回数を1回に指定したもので、ページを読み込むと5秒間のディレイの後にアニメーションが一回再生される。

標準ではディレイ中と再生後は animation を適用していない状態の「gray」で表示される。これは「animation-fill-mode」を「none」と指定したときの表示と同じ（animation-fill-mode のデフォルト値）

#anime6 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s 5s 1;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

サンプル

ディレイ中の表示の指定

「animation-fill-mode」を「backwards」と指定指定すると、ディレイ中の表示をアニメーションの始点の表示に置き換えることができる。次のサンプルの場合、ディレイ中の背景が「skyblue」で表示され再生後は「gray」になる。

#anime6_2 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s 5s 1;
  animation-fill-mode: backwards;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

サンプル

再生後の表示の指定

「animation-fill-mode」を「forwards」と指定指定すると、再生後の表示をアニメーションの終点の表示に置き換えることができる。次のサンプルの場合、再生後の背景色は「orange」になる。ディレイ中の背景は「gray」で表示される。

#anime6_3 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s 5s 1;
  animation-fill-mode: forwards;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

ディレイ中と再生後の表示の指定

「animation-fill-mode」を「both」と指定指定すると、ディレイ中の表示をアニメーションの始点の表示に、再生後の表示を終点の表示に置き換えることができる。次のサンプルの場合、ディレイ中の背景が「skyblue」で表示され再生後は「orange」になる。

#anime6_4 {
  color: white;
  width: 20em;
  text-align: center;
  background-color: gray;
  
  animation: my_anime1 3s 5s 1;
  animation-fill-mode: both;
}

@keyframes my_anime1 {
  0% {
    background-color: skyblue;
  }
  50% {
    background-color: pink;
  }
  100% {
    background-color: orange;
  }
}

animation を定義する際に指定する項目

animation でアニメーションを定義する場合、以下の項目を指定することができる。

animation-name：アニメーション名（キーフレーム名）
animation-duration：アニメーションにかかる時間（1回分）
animation-timing-function：アニメーションの速度変化（イージング : タイミング関数）
animation-delay：アニメーションを開始するまでの時間（遅延時間）
animation-iteration-count：アニメーションの繰り返し回数
animation-direction：アニメーションの繰り返し方法（再生方向）
animation-fill-mode：ディレイ中と再生後の表示状態
animation-play-state：アニメーションの再生と一時停止

（注意）一部のブラウザや古いバージョンのブラウザとの互換性のためにベンダープレフィックスが必要。（ここでは省略）

アニメーションプロパティの値は次の順序で設定するとある：（「アニメーション (Windows) – MSDN – Microsoft」より）が、transition 同様に順不同で animation-duration と animation-delay の順序だけは決まっているという話もあるみたいだけど。。。

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction

これらの項目は transition 同様、 animation プロパティでまとめて定義することも、個別に設定することも可能。

まとめて指定する場合

animation:animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

animation: キーフレーム名アニメーションにかかる時間イージング遅延時間繰り返し回数再生方向;

まとめて指定する例

animation:test 2s ease-out 0s 1 normal;

個別に指定する場合

個別に指定する例

animation-name: fade;                  
animation-duration: 0.3s; 
animation-timing-function: ease-in-out;  
animation-delay: 3s;           
animation-iteration-count:infinite;    
animation-direction: alternate;  
animation-fill-mode: both;

animation プロパティ
指定する項目	意味と使用例	デフォルト値
animation-name	アニメーション名（キーフレーム名）*必須アニメーションのキーフレームを示す @keyframes の名前を指定 animation-name: test;	なし
animation-duration	1 回のアニメーションサイクルを行う時間の長さこの値は、秒 (単位 “s” で指定) またはミリ秒 (単位 “ms” で指定) で指定することができる。単位を指定しない場合は、秒で指定したものとみなされる。注: 負の値は 0 として扱われる。 animation-duration: 120ms;	0s
animation-timing-function	アニメーションの速度変化（イージング : タイミング関数）キーフレームのブロック内で定義されたアニメーションタイミング関数は、そのキーフレームに対して適用される。一方、キーフレームでタイミング関数が指定されていない場合は、アニメーション全体に対して指定されたタイミング関数が使用される。（transition/transition-timing-function で指定する値参照） animation-timing-function: ease-in-out; animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);	ease
animation-delay	アニメーションを開始するまでの時間（遅延時間）要素が読み込まれてからアニメーションを始めるまでの遅延時間遅延時間に負の値を指定すると、アニメーションは直ちに開始されるが、アニメーションが途中から始まるように見える。例えば、遅延時間に -1s を指定するとアニメーションは直ちに始まるが、それは 1 秒経過した時点からになる。この値は、秒 (単位 s で指定) またはミリ秒 (単位 ms で指定) で指定することができる。単位を指定しない場合は、宣言が無効になる。 animation-delay: 3s;	0s
animation-iteration-count	アニメーションの繰り返し回数無期限に繰り返すことを示す infinite を指定することもでる。負の値は 0 として扱われる。また、アニメーションの周期の一部を実行するために、整数以外の値を指定することも可能。例えば 0.5 を指定すると、アニメーションの周期の半分を実行する。 animation-iteration-count: 2.5	1
animation-direction	アニメーションの繰り返し方法（再生方向）アニメーションするたびに、逆方向のアニメーションを行ってからアニメーションを繰り返すか、始めの状態にリセットしてアニメーションを繰り返すかを設定 normal 順方向のアニメーションのみを毎回実行。アニメーションのサイクルごとに、初期状態にリセットされてからアニメーションが再び始まる。 alternate 繰り返しの際、偶数回は逆方向に再生。逆方向のアニメーションを行うときは、初期状態に戻るようなアニメーションになる。また、timing-functions の値も逆になる。例えば ease-in のアニメーションは、逆方向のアニメーションでは ease-out のアニメーションに置き換えられる。 reverse アニメーションを毎回逆方向に実行。アニメーションのサイクルごとに、最終状態にリセットされてからからアニメーションが再び始まる。 alternate-reverse alternateとは逆。奇数回を逆方向、偶数回を正方向に再生 animation-direction: alternate;	normal
animation-fill-mode	アニメーションの実行前後に、指定したスタイルを適用するかを設定 none 要素の元のスタイルのまま（アニメーションで指定されたスタイルは、アニメーションの実行前や実行後には適用されない） forwards 再生後、要素のスタイルは最後のキーフレームの状態のままになる。 backwards 再生前、要素のスタイルは最初のキーフレームの状態になる。 both 再生前、要素のスタイルは最初のキーフレームの状態になり、再生後、要素のスタイルは最後のキーフレームの状態のままになる。 animation-fill-mode: both;	none
animation-play-state	アニメーションが実行中か、一時停止されているかを判定。このプロパティの値を取得することで、アニメーションが実行中か否かを調べることができる。また、このプロパティの値を設定することで、アニメーションを一時停止させたり、再開させたりすることができる。一時停止されたアニメーションを再開すると、アニメーションは最初から始まるのではなく、一時停止された時点から始まる。 running アニメーションは実行中。 paused アニメーションは一時停止している。 animation-play-state: paused;	running

animation のベンダープレフィックス

ベンダープレフィックスの整理整頓（W3G) によると animation について以下のように書いてある。

Operaがいったり来たりでややこしいですが、Opera12.1よりサポートしているので旧Presto版Operaのことを考慮しても、ベンダー識別子は不要です。BlinkとWebkit関連のみベンダー識別子が必要ということで、animationのベンダープレフィックスには-webkit-のベンダー識別子のみ残しておく必要があると言えるでしょう。

まだ一部のブラウザや古いバージョンのブラウザとの互換性のためにベンダープレフィックスが必要とのことだが、いちいち書くのは面倒なので、Sass/Compass を利用して見る。

Sass の利用

キーフレームを出力するミックスイン

デフォルトでは「-webkit-」のみ書き出し。その他のプレフィックスが必要な場合は、それぞれのパラメータの値を「true」に指定。

@mixin keyframes($name, $moz: false, $ms: false, $o: false){
  @-webkit-keyframes $name {
    @content;
  }
  @if $moz {
      @-moz-keyframes $name {
      @content;
    }
  }
  @if $ms {
      @-ms-keyframes $name {
      @content;
    }
  }
  @if $o {
      @-o-keyframes $name {
      @content;
    }
  }
  @keyframes $name {
    @content;
  }
}

使用例

@include keyframes(test) {
  0% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

//コンパイル結果
@-webkit-keyframes test {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes test {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

animation プロパティを出力するミックスイン（１）

ショートハンドのプロパティを出力
引数はカンマ区切り
複数のキーフレームには対応していない
$name（アニメーション名）と $duration（アニメーションにかかる時間）は必須
プレフィックスは「-webkit-」のみを含めているので、他のプレフィックスが必要であればリスト（$prefixes）に追加

@charset "utf-8";

//-webkit-, -moz-, -ms-, -o-, null;
$prefixes: -webkit-, null;

//引数：カンマ区切り
@mixin animation($name, $duration, $easing: null, $delay: null, $count: null, $direction: null, $fill: null) {
  @each $prefix in $prefixes {
      #{$prefix}#{animation}: $name $duration $easing $delay $count $direction $fill;
  }
}

使用例（キーフレームは別途出力する必要あり）

.anim {
  @include animation(test, 3s, ease-in, 0.1s, both);
}

//コンパイル結果
.anim {
  -webkit-animation: test 3s ease-in 0.1s both;
  animation: test 3s ease-in 0.1s both;
}

animation プロパティを出力するミックスイン（２）

複数のキーフレームに対応しているのはこれだけ。（これが一番使い勝手が良いみたい）

ショートハンドのプロパティを出力
引数はスペース区切り
複数のキーフレームに対応（キーフレームはカンマ区切り）
プレフィックスは「 -webkit-」のみを含めているので、他のプレフィックスが必要であればリスト（$prefixes）に追加

@charset "utf-8";

//-webkit-, -moz-, -ms-, -o-, null;
$prefixes: -webkit-, null;

//引数：スペース区切り（複数のキーフレームがある場合はそれらをカンマ区切り）
@mixin animation2($value...) {
  @each $prefix in $prefixes {
      #{$prefix}#{animation}: $value;
  }
}

使用例（キーフレームは別途出力する必要あり）

.anim2 {
  @include animation2(test1 3s infinite, test2 10s 1);
}

//コンパイル結果
.anim2 {
  -webkit-animation: test1 3s infinite, test2 10s 1;
  animation: test1 3s infinite, test2 10s 1;
}

animation プロパティを出力するミックスイン（３）

プロパティを個別に出力
引数はカンマ区切り
複数のキーフレームには対応していない
$name（アニメーション名）と $duration（アニメーションにかかる時間）は必須
プレフィックスは「-webkit-」のみを含めているので、他のプレフィックスが必要であればリスト（$prefixes）に追加

@charset "utf-8";

//-webkit-, -moz-, -ms-, -o-, null;
$prefixes: -webkit-, null;


//引数：カンマ区切り
@mixin animation3($name, $duration, $easing: null, $delay: null, $count: null, $direction: null, $fill: null) {
  @each $prefix in $prefixes {
     #{$prefix}#{animation-}name: $name;
     #{$prefix}#{animation-}duration: $duration;
     #{$prefix}#{animation-}timing-function: $easing;
     #{$prefix}#{animation-}delay: $delay;
     #{$prefix}#{animation-}iteration-count: $count;
     #{$prefix}#{animation-}direction: $direction;
     #{$prefix}#{animation-}fill-mode: $fill;

  }
}

使用例（キーフレームは別途出力する必要あり）

.anim3 {
   @include animation3(test, 3s, 0.1s, ease-in, $fill:both);
}

//コンパイル結果
.anim3 {
  -webkit-animation-name: test;
  -webkit-animation-duration: 3s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-delay: 0.1s;
  -webkit-animation-fill-mode: both;
  animation-name: test;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-delay: 0.1s;
  animation-fill-mode: both;
}

Compass の利用

キーフレームは Sass と同じ。

Compass にも animation のミックスインはないので、「experimental」を利用して以下のようなミックスインを作成。

以下の例では「-webkit」と「-moz」のベンダープレフィックスを出力
「-ms」や「-o」を出力するにはその前の「not」を削除
「official」はプレフィックスなしらしいが、あってもなくても変わらない（みたい）
複数のキーフレームには対応していない

ショートハンドで出力

@charset "utf-8";
@import "compass";

//引数：カンマ区切り
@mixin animate($name, $duration, $easing: null, $delay: null, $count: null, $direction: null, $fill: null) {
  @include experimental(animation, $name $duration $easing $delay $count $direction $fill, -webkit, -moz, not -o, not -ms, official);
}

使用例（キーフレームは別途出力する必要あり）

.anime_test {
  @include animate(test, 3s, ease-in, 0.1s, $fill: both) 
}

//コンパイル結果
.anime_test {
  -webkit-animation: test 3s ease-in 0.1s both;
  -moz-animation: test 3s ease-in 0.1s both;
  animation: test 3s ease-in 0.1s both;
}

プロパティを個別に出力（複数のキーフレームには対応していない）

@charset "utf-8";
@import "compass";

//引数：カンマ区切り
@mixin animate2($name, $duration, $easing: null, $delay: null, $count: null, $direction: null, $fill: null) {
  @include experimental('animation-name', $name, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-duration', $duration, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-timing-function', $easing, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-delay', $delay, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-iteration-count', $count, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-direction', $direction, -webkit, -moz, not -o, not -ms, official);
  @include experimental('animation-fill-mode', $fill, -webkit, -moz, not -o, not -ms, official);
}

使用例（キーフレームは別途出力する必要あり）

.anime_test2 {
  @include animate2(test, 3s, ease-in, 0.1s, $fill: both) 
}

//コンパイル結果
.anime_test2 {
  -webkit-animation-name: test;
  -moz-animation-name: test;
  animation-name: test;
  -webkit-animation-duration: 3s;
  -moz-animation-duration: 3s;
  animation-duration: 3s;
  -webkit-animation-timing-function: ease-in;
  -moz-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  animation-fill-mode: both;
}

設定例

回転し続けるアニメーションの設定例。

この例は font-awesome の歯車のアイコンを回転させ続けるアニメーション。（実際には font-awesome には「fa-spin」というクラスがあり、それを指定すればアイコンを回転させることができる。）

font-awesome の歯車のアイコン（i 要素）のクラス（class=”fa fa-cog”）にアニメーションのクラス（rotate_infinite）を追加
アニメーション名は「rotate360」

HTML

<h2><i class="fa fa-cog rotate_infinite"></i> Title</h2>

キーフレームとアニメーションのミックスイン
_mixin.scss

$prefixes: ("-webkit-", "-moz-", null);
@mixin keyframes($name){
  @-webkit-keyframes $name {
    @content;
  }
  @-moz-keyframes $name {
    @content;
  }
  @keyframes $name {
    @content;
  }
}

@mixin animation($value...) {
  @each $prefix in $prefixes {
    #{$prefix}#{animation}: $value;
  }
}

Sass の記述
style.scss

@import "mixin";

@include keyframes(rotate360) {
  0% {
    transform: rotate(0deg);
  }
  100% {
   transform: rotate(-359deg);
  }
}

.rotate_infinite {
  @include animation(rotate360 5s linear infinite);
}

コンパイル結果（CSS）
style.css

@-webkit-keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

@-moz-keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

@keyframes rotate360 {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-359deg);
  }
}

.rotate_infinite {
  -webkit-animation: rotate360 5s linear infinite;
  -moz-animation: rotate360 5s linear infinite;
  animation: rotate360 5s linear infinite;
}

以下は font-awesome の「fa-spin」の設定（font-awesome.css より）

.fa-spin {
  -webkit-animation: spin 2s infinite linear;
  -moz-animation: spin 2s infinite linear;
  -o-animation: spin 2s infinite linear;
  animation: spin 2s infinite linear;
}
@-moz-keyframes spin {
  0% {
    -moz-transform: rotate(0deg);
  }
  100% {
    -moz-transform: rotate(359deg);
  }
}
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
  }
}
@-o-keyframes spin {
  0% {
    -o-transform: rotate(0deg);
  }
  100% {
    -o-transform: rotate(359deg);
  }
}
@keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

参考にさせていただいたサイト：
[Sass]泣くほど早い…今すぐ使える便利なmixin集（cappee.net）
8 Compass extensions you may not know（hugogiraudel.com）
compassのベンダープリフィックス制御（naver.jp）

トランスフォーム（変形処理）

transition プロパティの開始時と終了時の状態や、@keyframes のキーフレームの状態を定義する際に、通常の CSS のプロパティ（height, background-color, opacity など）に加えて、transform プロパティによる変形処理を適応することができる。

transform プロパティの書式

transform: トランスフォーム関数();

トランスフォーム関数をスペースで区切って記述して、複数の変形処理を適用することも可能。

transform: rotate(60deg) translate(100px, 300px) scaleY(2);

transform を利用する際に、意識する必要があるのは座標系で、Web ページはブラウザ左上を原点とした座標系を構成している。

X 軸は右方向に、Y 軸は下方向に行くほど値が大きくなる
Web ページに配置された要素はそれぞれが左上を原点としてローカル座標系を構成している

transform プロパティでは、このように構成された座標系を回転、拡大縮小、移動、スキュー（シアー）することができる。

例えば、div 要素に transform を rotate(10deg) と指定して回転させると div 要素のローカル座標系が時計回りに10度回転される。このとき、ローカル座標系の原点は div 要素が構成するボックスの中央にセットされて処理される。これは、transform を指定すると、同時に適用される transform-origin の初期値（デフォルト）が「50% 50%」と設定されているため。

また、拡大縮小を行うとローカル座標系の１目盛りの大きさが変化する。そのため変形処理の適用順によっては処理結果も変わってくるので注意が必要。

以下は２次元の変形処理を行う関数と指定できる値。

マイナスの値を指定することも可能
translate(), scale(), skew() では Y 軸方向の値を省略することが可能
その場合、Y 軸方向の値は translate() と skew() では「0」、scale() では X 軸方向と同じ値で処理される

2D トランスフォーム
変形処理	トランスフォーム関数	値
移動	translate(Tx, Ty)	Tx : x 軸方向の移動距離 Ty : y軸方向の移動距離
	translateX(Tx)
	translateY(Ty)
拡大・縮小	scale(Sx, Sy)	Sx : x 軸方向の拡大縮小の倍率 Sy : y軸方向の拡大縮小の倍率
	scaleX(Sx)
	scaleY(Sy)
回転	rotate(R)	R : 回転角度
スキュー	skew(Sx, Sy)	Sx : x 軸方向のスキューの角度 Sy : y軸方向のスキューの角度
	skewX(Sx)
	skewY(Sy)

transform プロパティでは、３次元の変形処理を指定することもできる（省略）。

2D トランスフォームの原点

transform で変形処理を行うとtransform-origin が適用され、その初期値（デフォルト）「50% 50%」によってローカル座標系の原点の位置がボックスの中央にセットされる。

原点の位置を変更するには、transform-origin で指定する。例えば「0% 100%」と指定すると、ボックスの左下が原点になる。

特定の比率の値は以下のキーワードに置き換えて指定することも可能。

transform-origin キーワード
	比率	キーワード	位置
左辺からの距離	0%	left	左
	50%	center	中央
	100%	right	右
上辺からの距離	0%	top	上
	50%	center	中央
	100%	bottom	下

トランスフォームのベンダープレフィックス

ベンダープレフィックスの整理整頓（W3G) によると transform, transform-origin(2D) について以下のように書いてある。

現時点でIE9は10%以上のシェアをもっていることと、WebkitとBlink系はベンダー識別子なしのサポートは未だ無いので、2D構文におけるtransition, transform-originのベンダープレフィックスには-webkit-と-ms-のベンダー識別子を残しておく必要があると言えるでしょう。

Web Design Leaves