webkitキーフレームアニメーション構文

基本的な宣言と使用用途

@-webkit-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}
@-moz-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}
@-ms-keyframes NAME-YOUR-ANIMATION {
        0%   { opacity: 0; }
        100% { opacity: 1; }
}
   

#box {
     -webkit-animation: NAME-YOUR-ANIMATION 5s infinite;
     -moz-animation:    NAME-YOUR-ANIMATION 5s infinite;
     -ms-animation:     NAME-YOUR-ANIMATION 5s infinite;
}
   

このアーティクルを執筆した時点では、上記で使用されている３つのベンダープレフィックスのみが実装されています。けれどプレフィックス無しのバージョンが大規模な変更無しですぐに実装される可能性があるので、プレフィックス無しのバージョンで使用することも考慮に入れた方がよいかもしれませんね。

そしてこちらのアーティクル上では、コードの簡潔化を図るために-webkit-のみ記述します。実際に現実社会で使用する際には、きちんと全てのベンダープレフィックスを記述してくださいね。

複数時間軸の指定

@-webkit-keyframes fontbulger {
        0% {
                font-size: 10px;
        }
        30% {
                font-size: 15px;
        }
        100% {
                font-size: 12px;
        }
}
#box {
     -webkit-animation: fontbulger 2s infinite;
}
   

もしアニメーションの開始と終了のプロパティが同じならば、０％と１００％をコンマ区切りで指定する方法もあります：

@-webkit-keyframes fontbulger {
        0%, 100% {
                font-size: 10px;
        }
        50% {
                font-size: 12px;
        }
}
   

勿論、アニメーションを二度実行させることも出来ますし（または偶数回なら何度でも）、alternateを使って逆方向に戻って来させることも出来ます。

別々のプロパティを持つキーフレームアニメーションの呼び出し

#box {
 -webkit-animation-name: bounce;
 -webkit-animation-duration: 4s;
 -webkit-animation-iteration-count: 10;
 -webkit-animation-direction: alternate;
 -webkit-animation-timing-function: ease-out;
 -webkit-animation-fill-mode: forwards;
 -webkit-animation-delay: 2s;
}
   

アニメーションの速記

それぞれ個々の値をスペース区切りで記述することも出来ます。durationとdelayを同時に使用する時は順番に記述する必要がありますが、それ以外は順不同で構いません。下記の例で言うと　1s＝duration、2s＝delay、3＝interationsになります。

-webkit-animation: test 1s 2s 3 alternate backwards
   

transformとanimationの組合せ

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
   

複数のアニメーション

セレクタ上で値をコンマ区切りすることにより、複数のアニメーションを宣言することも可能です。

.animate-this {
   -webkit-animation:
      first-animation 2s infinite,
      another-animation 1s;
}
   

サポートしているブラウザ

Firefox 5+、 IE 10+、 Chrome 6?+、 Safari 5+

参考サイト

Mozilla Docs