Document

CSS アニメーション

CSS でアニメーションをするには、CSS Transition と CSS Animation の2つの機能があります

CSS Transition は、前述で説明したとおり、transform プロパティを利用して単純なアニメーションを表現できます。各プロパティの使いかたは、前述を参照いただき、ここではトリガの付けかたを説明していきます。

CSS Animation は、きめ細かいアニメーションを表現することができます。

CSS アニメーションをするメリット

CSS でアニメーションをするメリットは、次のように手軽さやパフォーマンスが良いなどが考えられます。

JavaScriptが不要^※
単純なアニメーションならJavaScriptを利用するより実装が容易
JavaScriptが書けない人でもアニメーションの実装ができる
JavaScriptを利用したアニメーションと比べてパフォーマンスの遜色はない(利用シーンや実装方法によっては優れていることもある)

※ アニメーション自体には、JavaScript は不要ですが、キーを押したらアニメーションがはじまるなどのトリガを付与するには JavaScript が必要になってきます。

CSS アニメーションの使いどころ

次のようにシーンごとに CSS アニメーションと JavaScript アニメーションを使い分ける感じでいいかと思います。

UI 要素の状態の切り替えなど、単純な「ワンショット」遷移にはCSS アニメーションを使用します
バウンド、停止、一時停止、巻き戻し、スローダウンなど、高度な効果を実現したい場合はJavaScript アニメーションを使用します

CSS Transition

次の transition プロパティを利用してアニメーションを表現することができます。
詳しい説明は前述していますので、ここでは割愛して、これらのアニメーションを動かすトリガの設定方法を説明します。

transition プロパティは、CSS で自身を変更できないので、:hoverなどの疑似クラスや JavaScript のイベント関数で、変更する必要があります。

transition プロパティ
No	プロパティ名	説明
01	transition-duration	変化が始まって終わるまでの時間を指定します
02	transition-property	変化が適用されるCSSのプロパティを指定します
03	transition-timing-function	変化の度合いを指定します
04	transition-delay	変化が始まる時間を指定します
05	transition	上記の4つのプロパティを一括で指定できる、ショートハンド・プロパティです下記の順番で指定します。 transition-property の値 transition-duration の値 transition-timing-function の値 transition-delay の値

アニメーションのトリガのとりかた

▶:hover によってアニメーション

要素にマウスを乗せることにより、アニメーションをはじめます。

マウスを乗せるとアニメーションします。

[HTML]
   <div class='box'></div>

[CSS]
   .box {
      width: 100px;
      height: 100px;
      background: #000;
      transition: all 300ms 0s ease;
   }

   .box:hover {
      background: #ccc;
      width: 300px;
   }

▶:active によってアニメーション

リンクをクリックしている間などに、アニメーションをはじめます。

リンクを押している間だけ、アニメーションします。

ダミーリンク（押している間だけアニメーション）

[HTML]
      <p><a href='#' class='sample'>ダミーリンク（押している間だけアニメーション）</a></p>

[CSS]
   a.sample {
      >transition: all 300ms 0s ease;
   }

   a.sample:active {
      background: #ccc;
      width: 300px;
   }

▶:focus によってアニメーション

inputなど、focusした際にアニメーションで変化します。

入力欄を選択すると、アニメーションします。

[HTML]
      <input name='sample'></input>

[CSS]
   input[name='sample'] {
      transition: all 300ms 0s ease;
   }

   input[name='sample']:focus {
      background: #222;
      color: #fff;
   }

▶ボタン押下によってアニメーション

クラス「.movin」に、scale(2)・margin-left 300px を指定しておき、JavaScript にて、ボタン押下でクラス「.movin」を付けたり・外したりします。

ボタンを押すと、アニメーションします。

[HTML]
   <div class='box'></div>
   <button onclick='movin();' >押すと動きます</button>

[CSS]
   .box {
      width: 100px;
      height: 100px;
      transition: all 300ms 0s ease;
   }

   .box.movin {
      transform:scale(2);
      margin-left: 300px;
   }

[JavaScript]
   function movin(){
      $('.box').toggleClass('movin');
   }

CSS Transitionを利用したアニメーションのイベント

「transitionend」を使用して、CSS Transitionを利用したアニメーションの終了時のイベントを取得できます。

▶アニメーション終了

「transitionend」で、アニメーション終了のイベントを取得できます。

ホバーすると、アニメーションします。アニメーションが終了するとするとカウントアップします。

アニメーション回数：


[HTML]
   <div class='box'></div>
   <p>アニメーション回数：<span id='sist'></span></p>

[CSS]
   .box {
      width: 100px;
      height: 100px;
      background: #000;
      transition: all 300ms 0s ease;
   }

   .box:hover {
      background: #ccc;
      width: 300px;
   }

[JavaScript]
   var $box = $('.box');
   var $count = $('#sist');
   var count = 1;

   $box.on('transitionend', function(e){
       if (e.originalEvent.propertyName === 'width') {
           $count.text(count++);
       }
    });

transitionendイベントはアニメーションを適用したプロパティの数だけイベントが発火するため注意。

デモではbackgroundとwidthをアニメーションさせているため、1回のアニメーションで2回イベントが発火する。
そのため、1回のアニメーションで1回だけ処理を実行したい場合はデモのように特定のプロパティのアニメーション終了時に処理を実行する。

CSS Animation

transform でも、アニメーションを実装できますが、もっと細かいアニメーションを表現するには、キーフレームアニメーションを適用できる CSS Animation を利用します。

キーフレームアニメーション

キーフレームアニメーションとはアニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定できるアニメーションのこと。(プロパティを指定した経過地点のことをキーフレームという)

キーフレーム

アニメーションの開始(0%)から終了(100%)までの任意の経過地点にプロパティを指定するものです。

次のように記述します。

   @keyframe アニメーション名 {
      0% {スタート時のプロパティ値}
      **% {途中のプロパティ値}
      ??% {途中のプロパティ値}
      …
      100% (終了時のプロパティ値)
   }

@keyframes の中のプロパティは、負荷の少ない transofrm プロパティで指定すると、よりスムーズなアニメーションをつくることができます。

キーフレームはアニメーションの動きを設定するだけで、キーフレーム単体ではアニメーションはしません。animation プロパティで、キーフレームを呼び出してアニメーションをさせます。

アニメーション

animation プロパティで、アニメーションの動き「@keyframes」を呼び出して、アニメーションの時間や変化のしかたなどを設定して、実際にアニメーションを再生します。

animation プロパティ

animation プロパティ
No	プロパティ名	説明
01	animation-name	アニメーションを呼び出します ※必須です！
02	animation-duration	アニメーション1回の実行にかける時間を指定します ※必須です！
03	animation-timing-function	アニメーションの変化の度合いを指定します
04	animation-iteration-count	アニメーションを繰り返す数を指定します
05	animation-direction	アニメーションを繰り返す際、アニメーションの方向を反対にする等の指定ができます
06	animation-play-state	アニメーションの実行、および停止を指定できます
07	animation-delay	アニメーション実行やプロパティ変更の際の待ち時間を指定します
08	animation-fill-mode	アニメーション実行後、当該要素のスタイルを元に戻さず、変化したままのスタイルを維持するかどうかを指定できます
09	animation	上記の8つのプロパティを一括で指定できる、ショートハンド・プロパティです

ベンダープレフィックスを付けないと動作しないブラウザもあるため、最低でも -webkit- は付けるようにしたほうが良いです。

animation-name

アニメーションを呼び出すプロパティです。

@keyframes で設定したアニメーションの名前のアニメーションを呼び出します。

   セレクタ名 {
      -webkit-animation-name:アニメーション名;
      animation-name:アニメーション名;
   }


[HTML]
   <div class='box'></div>

[CSS]
   .box {
      width: 100px;
   }

   .box.movin {
      -webkit-animation-name:sample;
      animation-name:sample;

      -webkit-animation-duration:2s;
      animation-duration:2s;

      ...
      ここに、次から説明する各 animation プロパティ を記述する

   }

   @keyframes sample {
      0% {transform:translate(0px,0px) scale(1)}
      50% {transform:translate(300px,0px)}
      100% {transform:translate(300px,0px) scale(2) rotateZ(180deg)}
   }

一覧表に戻る

animation-duration

アニメーションにかける時間を指定します。

アニメーションの場合は、この時間は1回の実行にかける時間を意味します。

設定しない場合は、０秒なのでアニメーションしません。

   セレクタ名 {
      -webkit-animation-duration:値;;
      animation-duration:値;;
   }

値は、秒数またはミリ秒数で指定します

単位は s または ms になります

指定できる単位	秒で換算
s	1s は1秒
ms	1ms は1000分の1秒

※ 秒数の指定で、0 秒を指定するときは単位も記述してください

animation-duration:2s;

animation-duration:5s;

一覧表に戻る

animation-timing-function

アニメーションの変化の度合いを指定できるプロパティです。

   セレクタ名 {
      -webkit-animation-timing-function:値;
      animation-timing-function:値;
   }

指定できる値は下記になります

No	値	説明
01	ease（初期値）	開始時と終了時は緩やかに変化します
02	linear	開始から終了まで一定に変化します
03	ease-in	開始時は緩やかに変化、終了に近づくと早く変化します
04	ease-out	開始時は早く変化し、終了時は緩やかに変化します
05	ease-in-out	開始時と終了時は、かなり緩やかに変化します
06	cubic-bezier (x軸の値, y軸の値, x軸の値, y軸の値)	変化の度合いを3次ベジェ曲線で指定します

animation-timing-function:ease;

animation-timing-function:linear;

animation-timing-function:ease-in;

animation-timing-function:ease-out;

animation-timing-function:ease-in-out;

一覧表に戻る

animation-iteration-count

アニメーションの繰り返し回数を指定するプロパティです

   セレクタ名 {
      -webkit-animation-iteration-count:値;
      animation-iteration-count:値;
   }

指定できる値は下記になります

値	内容
infinite	無限に繰り返します
数字	指定した数値回数だけ繰り返します

animation-iteration-count:1;

animation-iteration-count:3;

animation-iteration-count:infinite;

一覧表に戻る

animation-direction

アニメーションの再生方向を指定するプロパティです

   セレクタ名 {
      -webkit-animation-direction:値;
      animation-direction:値;
   }

指定できる値は下記になります

値	内容
normal	アニメーションを通常再生します。(0% → 100%) アニメーションがループの場合、再び始め(0%)から再生します。
reverse	アニメーションを逆再生します。(100% → 0%) アニメーションがループの場合、逆再生の始め(100%)から再生します。
alternate	アニメーションを通常再生します。(0% → 100%) アニメーションがループの場合、通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%)といった繰り返し順で再生されます
alternate-reverse	アニメーションを逆再生します。(100% → 0%) 逆再生(100% → 0%) → 通常再生(0% → 100%) → 逆再生(100% → 0%) → 通常再生(0% → 100%)といった繰り返し順で再生されます

animation-direction:normal;

animation-direction:reverse;

animation-direction:alternate;

animation-direction:alternate-reverse;

一覧表に戻る

animation-play-state

アニメーションの実行、および停止を指定するプロパティです

   セレクタ名 {
      -webkit-animation-play-state:値;
      animation-play-state:値;
   }

指定できる値は下記になります

値	内容
running	アニメーションが実行されます。
paused	アニメーションが一時停止されます。

animation-play-state

animation-play-state:runnnig

[JavaScript]
   if ($('.box').css('animation-play-state') === 'paused') {
      $('.box').css('animation-play-state' , 'running');
   } else {
      $('.box').css('animation-play-state' , 'paused');
   }

一覧表に戻る

animation-delay

アニメーションが開始するまでの遅延時間を指定するプロパティです

   セレクタ名 {
      -webkit-animation-delay:値;
      animation-delay:値;
}

時間は「animation-duration」と同じく秒数またはミリ秒数で指定します

animation-delay:2s

2秒後に再生します

一覧表に戻る

animation-fill-mode

アニメーション開始前、終了後のアニメーションを指定するプロパティです

   セレクタ名 {
      -webkit-animation-fill-mode:値;
      animation-fill-mode:値;
   }

指定できる値は下記になります

値	内容
none	何も適用されません。
forwards	アニメーション終了後にキーフレームアニメーションで指定したプロパティを適用します。 ★⇒アニメーションが終了しても要素はアニメーション終了時(100%)の状態のままになります。※逆再生だったら(0%)の状態のままになります。
backwards	アニメーション開始前にキーフレームアニメーションで指定したプロパティを適用します。 ★⇒animation-delay で遅延時間を指定し、アニメーションが開始していなくても要素はアニメーション開始時(0%)の状態になります。※逆再生だったら(100%)の状態になります。
both	forwardsとbackwardsの両方を適用したものになります。

アニメーション開始まで 2s, @keyframes 0% に青色、100% に緑色の背景色を設定しています。

animation-fill-mode:none

animation-direction:normal（正再生）

animation-direction:reverse（逆再生）

animation-fill-mode:forwards

animation-direction:normal（正再生）

animation-direction:reverse（逆再生）

animation-fill-mode:backwards

animation-direction:normal（正再生）

animation-direction:reverse（逆再生）

animation-fill-mode:both

animation-direction:normal（正再生）

animation-direction:reverse（逆再生）

@keyframes が transform だけだと、うまく動かない場合があります。その場合は、ダミーで background-color:none など影響がないプロパティを入れます。

一覧表に戻る

animation

今までのプロパティをまとめて指定できるショートハンドプロパティです

animation プロパティの値に下記プロパティの値を指定します

animation-name の値
animation-duration の値
animation-timing-function の値
animation-delay の値
animation-iteration-count の値
animation-direction の値
animation-fill-mode の値
animation-play-state の値

それぞれの値は半角スペースで区切って指定します。

任意の順序で指定できますが、animation-duration、animation-delay プロパティについては、1つ目がanimation-durationプロパティ、2つ目がanimation-delayプロパティに適用されます。

省略した場合は、各プロパティの初期値が適用されます。

セレクタ名 {
   -webkit-animation:animation-nameの値 animation-durationの値 animation-timing-functionの値
         animation-delayの値 animation-iteration-countの値 animation-directionの値
         animation-fill-modeの値 animation-play-stateの値;
   animation:animation-nameの値 animation-durationの値 animation-timing-functionの値
         animation-delayの値 animation-iteration-countの値 animation-directionの値
         animation-fill-modeの値 animation-play-stateの値;
}

CSS animationを利用したアニメーションのイベント

「animation」を使用して、CSS animationを利用したアニメーションの開始時や終了時のイベントを取得できます。

transitionstart : アニメーション開始（delay完了後）のイベントを取得できます。
transitionend : アニメーション終了のイベントを取得できます。
animationiteration : アニメーション反復終了のイベントを取得できます。


[HTML]
   <div class='box'></div>
   <button class='button' onclick='movin();' >再生</button><span id='span'></span>

[CSS]
   .box {
      width: 100px;
   }
   .box.movin {
      animation: 5s ease 0s 1 normal none running sample;
   }
   @keyframes sample {
      0% {transform:translate(0px,0px) scale(1)}
      50% {transform:translate(300px,0px)}
      100% {transform:translate(300px,0px) scale(2) rotateZ(180deg)}
   }

[JavaScript]
   var $box = $('.box');
   function movin(){
       $box.addClass('movin');
       $mytext.text('ボタンがクリックされました！');
   }

   var $mytext = $('#span');
   $box.on('animationstart', function(e){
       $mytext.text('delay完了しましたので、アニメーション開始！');
   });

   var count = 1;
   $box.on('animationiteration', function(e){
       $mytext.text((++count) + '回目を再生中！');
   });

   $box.on('animationend', function(e){
       $box.removeClass('movin');
       $count.text('終了');
   });

JavaScriptで取得できるイベントもベンダープレフィックスを付けないと認識しないブラウザもあるため、注意が必要です。

   セレクタ.on('transitionend webkitTransitionEnd', function(e) {
      // 処理
   });

その他、いろいろTIPs

animation-timing-function プロパティの「cubic-bezier」を設定する

アニメーションの変化の度合いを指定できるプロパティ animation-timing-function プロパティで、「cubic-bezier」を利用して自分で任意の動きを設定することができます。

「cubic-bezier」は、変化の進行割合を3次ベジェ曲線で指定します。
3次ベジェ曲線は、以下の図のような4つのコントロールポイント（P0、P1、P2、P3）で定義されます。
P0 が変化の開始ポイント、P3 が変化の完了ポイントで、横軸が変化継続時間がどこまで経過したのか、縦軸が変化がどの程度実行されたのかを表します。仮に P0→P3 までが直線なら、変化は一定の割合で進行することになります。

P0（開始ポイント）とP3（完了ポイント）は固定なので、「cubic-bezier」では、P1 と P2 の値を指定することで変化の進行割合を調整します。

...と言っても、なかなか難しくて使いこなせないので、「cubic-bezier」を作成できるツールを！

①Ceaser – CSS Easing Animation Tool – Matthew Lein

各コントロールポイントの位置をマイナスまで設定でき、かつデフォルトで設定出来るイージングが豊富でプレビューも見やすく、サンプルソースもついてます。

②Chrome DevTools

Chrome の開発者ツールから利用できます。

①chrome ウインドウ上で、右クリック⇒「検証」を選択する

②@keyframes の「animation-timing-function」プロパティを設定している要素を選択

③右側の「Style」欄から、を選択する

animation-timing-function は、keyframes の中で細かく再定義できる

イージングはanimation-timing-functionを使って定義しますが、このプロパティはkeyframesの中で再定義が可能です。上手く使えばシンプルなコードで複雑なアニメーションが実装できます。

   セレクタ {
      background-color: red;
      height: 20px;
      width: 20px;
      animation: 'bounce' 2s ease-out 0s infinite alternate;
   }

   @keyframes bounce {
      0% {
         margin-top: 100px;
         animation-timing-function: ease-out;
      }
      25% {
         margin-top: 50px;
         animation-timing-function: ease-in;
      }
      50% {
         margin-top: 100px;
         animation-timing-function: ease-out;
      }
      75% {
         margin-top: 75px;
         animation-timing-function: ease-in;
      }
      100% {
         margin-top: 100px;
      }
   }