CSS3 animation属性の使用方法及び例

animation CSS属性は以下の属性のショートカット属性ですanimation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-modeおよびanimation-play-state。

以下の表は、この属性の使用上下文とバージョンハイストリをまとめています。

animationの使用方法

この属性の構文は以下の通りです：

animation:　[　name　duration　timing-function　delay　iteration-count　direction　fill-mode　play-state　]　|　initial　|　inherit

animation属性の使用方法を示す例です。

.box　{
　　　　width:　50px;
　　　　height:　50px;
　　　　background:　red;
　　　　position:　relative;
　　　　/*　Chrome,　Safari,　Opera　*/
　　　　-webkit-animation:　moveit　2s　linear　0s　infinite　alternate;
　　　　
　　　　animation:　moveit　2s　linear　0s　infinite　alternate;
}
　
/*　Chrome,　Safari,　Opera　*/
@-webkit-keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}
　
@keyframes　moveit　{
　　　　from　{left:　0;}
　　　　to　{left:　50%;}
}

属性値

以下のテーブルはこの属性の値を説明しています。

ブラウザの互換性

animation属性のブラウザの互換性、すべての主要ブラウザがこの属性をサポートしています。数字は、この属性をサポートする最初のブラウザのバージョン番号を示します。

さらに詳しく

以下のチュートリアルを参照してください：CSS3アニメーション。

関連属性と規則：animation-name、animation-duration、animation-timing-function、animation-delay、animation-iteration-count、animation-direction、animation-fill-mode、animation-play-state、@keyframes。