トップページ > コンテンツ > コンピュータ関連その他 > CSS編 > CSSの書き方 > プロパティ > animation

animationの指定方法は以下の方法がある。
animationをキックするタイミングとしては、
下に書いたようなhoverの他、予め固定のクラスにanimationをセットしておいて、
javascript側でclassを追加する等の方法もある。

尚、ここではベンダープレフィックスについては触れない。

アニメーションを適用したい要素:hover等 {
   animation: animation名 animationの長さ(s) animationの進行具合 animationの遅延開始時間(s) animationの繰り返し回数 再生の繰り返し方向;
}  	
@keyframes animation名 {
   from {/*アニメーション前のcssの状態*/} //<-0%のような書き方も可能。
   to {/*アニメーション後のcssの状態*/} //<-100%のような書き方も可能。50%等遷移途中も追記できる。
}

アニメーションを適用したい要素:hover等 {
   animation-name: animation名;
   animation-duration:animationの長さ(s);
   animation-timing-function: animationの進行具合;
   animation-delay: animationの遅延開始時間(s);
   animation-iteration-count: animationの繰り返し回数;
   animation-direction: 再生の繰り返し方向;
}  	
@keyframes animation名 {
   from {/*アニメーション前のcssの状態*/} //<-0%のような書き方も可能。
   to {/*アニメーション後のcssの状態*/} //<-100%のような書き方も可能。50%等遷移途中も追記できる。
}