CSS animation 属性

定義と使用法

animation 属性は、6つのアニメーション属性を設定するショートカット属性です：

注釈：常に指定してください animation-duration 属性が指定されていない場合、アニメーションは再生されません。

CSS3 チュートリアル：CSS アニメーション

HTML DOM リファレンスマニュアル：animation 属性

短縮属性を使用して、アニメーションを div 要素にバインドします：

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

値	説明
animation-name	キーフレームの名前をバインドする必要がある選択子を指定します。
animation-duration	アニメーションが完了するまでに費やされる時間を秒またはミリ秒で指定します。
animation-timing-function	アニメーションの速度曲線を指定します。
animation-delay	アニメーションが開始する前に指定される遅延を指定します。
animation-iteration-count	アニメーションが再生される回数を指定します。
animation-direction	アニメーションが交互に逆方向に再生されるかどうかを指定します。
animation-fill-mode	アニメーションが実行時間の外に適用される値を指定します。
animation-play-state	アニメーションが実行中か停止しているかを指定します。

デフォルト値：	none 0 ease 0 1 normal
継承性：	no
バージョン：	CSS3
JavaScript 语法：	object.style.animation="mymove 5s infinite"

テーブルの数字は、その属性を完全にサポートする最初のブラウザバージョンを示しています。

数字は、プレフィックスを使用する最初のバージョンを示しています。

Chrome	IE / Edge	Firefox	Safari	Opera
Chrome	Edge	Firefox	Safari	Opera
43.0 4.0 -webkit-	10.0	16.0 5.0 -moz-	9.0 4.0 -webkit-	30.0 15.0 -webkit- 12.0 -o-