CSSのanimationとtransformと@keiframesでアニメーション
CSSのanimationとtransformを使うと画像や文字など様々にアニメーションを行うことができます。
animation は @keiframes と共に以下のように使用します。
animation で任意の名前[アニメーション名]を付けて、@keiframesに同じ[アニメーション名]を設定することが重要です。
CSSセレクタ {
animation:
[アニメーション名] [再生時間] [変化の形式] [開始までの遅延時間]
[繰返し回数] [再生方向] [開始前終了後の適用] [再生か停止か];
}
@keyfames [アニメーション名]{
0%{ 適用するCSS }
・・・
100%{ 適用するCSS }
}
実際の例としては以下のようなCSSになり、クラス「imgani」の要素に移動、回転サイズ変更、透明度の変更を行うアニメーションを設定しています。
アニメーション名は「imgani」、 再生時間は「1秒」、
アニメーションの中間補完は「直線」、 アニメーション開始までの待ち時間は「0秒」、
繰り返し回数は「１回」、 再生方向は「順方向」、
アニメーション開始前と開始後の「両方に指定したCSSを適用」、 「即時再生」を指定しています。
.imgani{animation: imgani 1.0s linear 0.00s 1 normal both running;}
@keyframes imgani{
0%{transform:translate(0px,200px) rotateY(-360deg) scale(0.01);opacity:0.0;}
100%{transform:translate(0px, 0px) rotateY( 0deg) scale(1.00);opacity:1.0;}
}
CSS「animation」のプロパティ値の詳細説明
| [アニメーション名] animation-name |
対象となる@keyframesの[アニメーション名] | ||||||||
| [再生時間] animation-duration |
1回のアニメーションの再生時間 1秒なら 1s 、500ミリ秒なら 500ms |
||||||||
| [変化の形式] animation-timing-function |
linear（直線補完）、ease（緩やかに始まり急加速し緩やかに終わる）、ease-in（緩やかに始まる）、ease-out（緩やかに終わる）、easein-out（緩やかに始まり緩やかに終わる） | ||||||||
| [開始までの遅延時間] animation-delay |
アニメーション開始までの遅延時間 1秒なら 1s 、500ミリ秒なら 500ms |
||||||||
| [繰返し回数] animation-iteration-count |
アニメーションの繰り返し回数。 1回なら 1、2.5回なら 2.5、無限なら infinite を指定します。 |
||||||||
| [再生方向] animation-direction |
アニメーションの再生方向。
|
||||||||
| [開始前終了後の適用] animation-fill-mode |
アニメーションの開始前、終了後に@keyfamesで指定したCSSを適用するかどうか。
|
||||||||
| [再生か停止か] animation-play-state |
アニメーションが一時停止か再生かを指定。
|
1秒間でキーフレームアニメーションでY軸座標、Y軸回転角、拡大縮小率、透明度を変化させています。
