投稿日: 2012年07月12日 (2012-08-11更新)

CSS3のアニメーションには、「Transition」と「Animation」の2種類があります。
簡単に説明すると両者には次のような違いがあります。

Transition

要素に1つのモーションを適用できる。

Animation

要素に複数のモーションを適用できる。

今回は主にAnimationの仕様について説明します。

※本記事はwebkitブラウザでの動作を想定しています。FirefoxやIEではサンプルが正常に動作しませんのでご注意ください。

目次

CSS3 Animationでイメージを動かしてみる
単体アニメーションの例

Preview

※Androidでtransformを使用する場合、使わない値には初期値(0deg等)を入れておかないと、正常に動かなくなります。
※サンプルコードのプロパティには、ベンダープレフィックスを付加しています。

Sample Code

<style>
// アニメーション定義
.anime-motion1 {
  -webkit-animation-name: 'motion1';
  -webkit-animation-duration: 4s;
  -webkit-animation-iteration-count: infinite;
}
// 上記classの動作内容をキーフレームで定義
@-webkit-keyframes 'motion1' {
  // FLASHでいうところのタイムラインみたいなもの
  0% { 
    -webkit-transform: translate(0px,0px) scale(0.5,0.5) rotate(0deg);
  }
  25% { 
    -webkit-transform: translate(100px,-60px) scale(1,1) rotate(45deg);
  }
  50% { 
    -webkit-transform: translate(100px,20px) scale(1.5,1.5) rotate(220deg);
  }
  75% { 
    -webkit-transform: translate(0px,-60px) scale(1,1) rotate(320deg);
  }
  100% { 
    -webkit-transform: translate(0px,0px) scale(0.5,0.5) rotate(0deg);
  }
}
</style>

Note: (2012年8月11日追記)
最近のChromeでは、transform rotateと、opacityを同じkeyframesで指定すると、rotateが動作しなくなる。 そのうち修正されると思いますが。
確認時のバージョン→21.0.1180.75


プロパティ一覧

CSS3 Animationの主要な機能

説明

animation-name

アニメーションで使用するキーフレームの名称を指定する。
指定無しならアニメーションしない。
初期値: none
例:
animation-name: 'motion1'

animation-duration

アニメーションの再生時間を指定する。
初期値: 0
例:
animation-duration: 2s
animation-duration: 2000ms

animation-delay

再生開始までの遅延時間を指定する。
値がマイナスの場合、即座に再生サイクルの途中から再生される。
初期値: 0
例:
animation-delay: 5s
animation-delay: 500ms
animation-delay: -2s

animation-iteration-count

再生回数を指定する。
初期値: 1
例:
animation-iteration-count: 2
2回再生して止まる
animation-iteration-count: infinite
無限ループ

animation-direction

偶数回目のアニメーションを逆再生にするかの指定。
初期値: normal
例:
animation-direction: normal
順方向で再生
animation-direction: alternate
偶数回目は逆再生になる

animation-fill-mode

再生前後の表示を指定
初期値: none
例:
animation-fill-mode: none
再生後に表示状態を維持しない
animation-fill-mode: forwards
再生後の状態を維持する
animation-fill-mode: backwards
アニメーションを適用した際、遅延時間内であってもキーフレームの最初の状態を表示する。再生後はキーフレームの最初の状態を表示
animation-fill-mode: both
forwardsとbackwardsの両方が適用されている状態

animation-timing-function

イージングの指定。
初期値: ease
例:
animation-timing-function: ease-in
種類:
lineareaseease-inease-outease-in-outcubic-bezier(x1,y1,x2,y2)step-startstep-endsteps()
▲目次

ソーシャルゲーム風の見た目を作ってみます。
下記のコードは、アニメーションを定義したclassを切り替える実装例。
色の付いている箇所にカーソルを乗せると、さらに説明がポップアップします。

Preview

Sample Code

<script>
  // コードはjQueryベースです。
  $(function(){
    var btn = $('#btn-attack');
    var chara = $('#monster');

    // Attackボタン押下時の動作
    var attack = function(){
      btn.css({opacity:0.2});
      chara.removeClass()
           .addClass('anime-monster-down')
           .one('webkitAnimationEnd', repop);
    }
    // モンスターの出現
    var repop = function(){
      chara.removeClass()
           .addClass('anime-monster-pop')
           .one('webkitAnimationEnd', setup);
    }
    // セットアップ
    var setup = function(){
      chara.removeClass()
           .addClass('anime-monster-fly');
      btn.css({opacity:1})
         .one('click', attack );
    }
    setup();
  });
</script>
▲目次

animation-duration: 2s での各イージング動作をチェック

デフォルトのイージング


linear
ease
ease-in
ease-out
ease-in-out

cubic-bezierをいじってみる


cubic-bezier( 0.9, 0.15, 0.15, 0.9 )
cubic-bezier( 1, 0, 0, 1 )
▲目次



作成者: @7vsy

ホームへ戻る