CSSのanimationとtransformと@keiframesでアニメーション
CSSのanimationとtransformを使うと画像や文字など様々にアニメーションを行うことができます。
animation は @keiframes と共に以下のように使用します。
animation で任意の名前[アニメーション名]を付けて、@keiframesに同じ[アニメーション名]を設定することが重要です。
CSSセレクタ { animation: [アニメーション名] [再生時間] [変化の形式] [開始までの遅延時間] [繰返し回数] [再生方向] [開始前終了後の適用] [再生か停止か]; } @keyfames [アニメーション名]{ 0%{ 適用するCSS } ・・・ 100%{ 適用するCSS } }
実際の例としては以下のようなCSSになり、クラス「imgani」の要素に移動、回転サイズ変更、透明度の変更を行うアニメーションを設定しています。
アニメーション名は「imgani」、 再生時間は「1秒」、
アニメーションの中間補完は「直線」、 アニメーション開始までの待ち時間は「0秒」、
繰り返し回数は「1回」、 再生方向は「順方向」、
アニメーション開始前と開始後の「両方に指定した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軸回転角、拡大縮小率、透明度を変化させています。




