この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。

基本的な宣言と使用用途

@-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;
}
   

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

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

複数時間軸の指定

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

#box {
     -webkit-animation: fontbulger 2s infinite;
}
   

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

@-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;
}
   
プロパティ
timing-function ease、 ease-out、 ease-in、 ease-in-out、 linear、 cubic-bezier(x1, y1, x2, y2)(例: cubic-bezier(0.5, 0.2, 0.3, 1.0))
duration と delay Xs または Xms
duration-count X
fill-mode forwards、 backwards、 both、 none
animation-direction normal、 alternate

アニメーションの速記

それぞれ個々の値をスペース区切りで記述することも出来ます。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