Style animation属性

定義と使用方法

animation 属性は6つのアニメーション属性の省略記法です：

注：常に指定してください animationDuration属性それ以外の場合、デフォルトの持続時間は0で、再生は決して行われません。

例

div要素のアニメーションを省略記法属性で変更します：

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

実際に試してみる

構文

animation 属性を返します：

object.style.animation

animation 属性を設定します：

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

属性値

値 説明
animationName 選択子にバインドされるキーフレームの名前を規定します。
animationDuration アニメーションが完了するまで必要な秒数またはミリ秒を規定します。
animationTimingFunction アニメーションの速度曲線を規定します。
animationDelay animationDelay
アニメーションが開始する前に指定される遅延を規定します。 animationIterationCount
アニメーションが何回再生されるべきかを規定します。 animationDirection
アニメーションが交互にループする際に逆方向で再生されるかどうかを規定します。 アニメーションが実行時間の外に適用される値を規定します。
animationPlayState アニメーションが実行時間の外で再生しているかどうかを規定します。
initial この属性をデフォルト値に設定します。参照してください initial。
inherit この属性を親要素から継承します。参照してください inherit。

技術的詳細

デフォルト値： none 0 ease 0 1 normal none running
返り値： 文字列、要素の animation 属性。
CSS バージョン： CSS3

ブラウザサポート

animation CSS3 (1999) 特性です。

すべてのブラウザで完全にサポートされています：

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
サポート サポート サポート サポート サポート 11

関連ページ

CSS 参考マニュアル：animation 属性