トップへ(mam-mam.net/)

CSSのキーフレームアニメーション(@keyframes,animation)を使う方法

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
アニメーションの再生方向。
normal順方向(0% ⇒ 100% 方向)
reverse逆方向(100% ⇒ 0% 方向)
alternate順方向+逆方向(0% ⇒ 100% ⇒ 0%)
繰り返し回数を2回分消費
alternate-reverse逆方向+順方向(100% ⇒ 0% ⇒ 100%)
繰り返し回数を2回分消費
[開始前終了後の適用]
animation-fill-mode
アニメーションの開始前、終了後に@keyfamesで指定したCSSを適用するかどうか。
none開始前も終了後も適用しない
(アニメーション中だけ@keyfamesで指定したCSSを適用)
forwards終了後だけ適用
backwards開始前だけ適用する
both開始前も終了後も適用する
[再生か停止か]
animation-play-state
アニメーションが一時停止か再生かを指定。
running(初期値)アニメーション再生
pausedアニメーション一時停止

1秒間でキーフレームアニメーションでY軸座標、Y軸回転角、拡大縮小率、透明度を変化させています。

キーフレームアニメーション再実行