webkitキーフレームアニメーション構文
この記事は、http://css-tricks.com/ の Chris Coyier の許可を得て、翻訳しています。一部変更して翻訳している部分もある場合があります。オリジナルの記事はここよりご覧いただけます。 オリジナルの記事 基本的な宣言と使用用途 このアーティクルを執筆した時点では、上記で使用されている３つのベンダープレフィックスのみが実装されています。けれどプレフィックス無しのバージョンが大規模な変更無しですぐに実装される可能性があるので、プレフィックス無しのバージョンで使用することも考慮に入れた方がよいかもしれませんね。 そしてこちらのアーティクル上では、コードの簡潔化を図るために-webkit-のみ記述します。実際に現実社会で使用する際には、きちんと全てのベンダープレフィックスを記述してくださいね。 複数時間軸の指定 もしアニメーションの開始と終了のプロパティが同じならば、０％と１００％をコンマ区切りで指定する方法もあります： 勿論、アニメーションを二度実行させることも出来ますし（または偶数回なら何度でも）、alternateを使って逆方向に戻って来させることも出来ます。 別々のプロパティを持つキーフレームアニメーションの呼び出し プロパティ 値 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になります。 transformとanimationの組合せ 複数のアニメーション セレクタ上で値をコンマ区切りすることにより、複数のアニメーションを宣言することも可能です。 サポートしているブラウザ Firefox 5+、 IE 10+、 Chrome 6?+、 Safari 5+ 参考サイト Mozilla Docs
