CSSでアニメーション(キーフレーム編)

こんにちは、せぃゆーです。

以前CSSのトランジションについて記事を書いたので今回はキーフレームについて書きたいと思います。

トランジションについての記事はこちらから

キーフレームって何?

トランジションよりも細かいアニメーションの動きを実装できるもので、トランジションは始点・終点の2つのみでしたが、キーフレームでは各地点で設定することができます。

@keyframesの後にキーフレーム名を記述し、かっこの中に各地点(0%, 10%)などを記述

ここでは長くなるので10%,50%,100%のみを記載

@keyframes キーフレーム名 {
  0% {
    プロパティ: 値;
  }
  50% {
    プロパティ: 値;
  }
  100% {
    プロパティ: 値;
  }
}

animation-nameプロパティを使い、値に利用するキーフレーム名を指定

animation-durationプロパティで何秒で変化するか指定する

#test {
  animation-name: キーフレーム名;
  animation-duration: 秒数;
}

上記2つのプロパティはキーフレームを使う上で必須になります。

また、必須ではないものの指定できるプロパティがいくつか存在するので下記に記載します。

プロパティ名	意味	指定できる値
animation-name	キーフレーム名を指定	キーフレーム名を指定
animation-duration	アニメーションの実行時間	数値s(秒単位) 数値ms(ミリ秒単位)
animation-timing-function	変化の仕方	ease（初期値）始点終点は緩やかに変化 linear 始点から終点まで一定に変化 ease-in 始点は緩やかで終点に近づくほど速く変化 ease-out 始点は早くて終点に近づくほど緩やかに変化 ease-in-out 始点終点はかなり緩やかに変化
animation-delay	変化開始のタイミング	数値s(秒単位) 数値ms(ミリ秒単位)
animation-iteration-count	回数	数値(繰り返す回数) infinite(無限ループ)
animation-direction	再生方向	normal(初期値、通常方向) alternate(奇数回で通常方向、偶数回を逆方向) reverse(逆方向) alternate-reverse(奇数回で逆方向、偶数回で通常方向)
animation-fill-mode	再生前後の状態	none(初期値) backwards(最初のキーフレームの状態を適応) forwards(最後のキーフレームを保持) both(forwardsとbackwardsの両方を保持)
animation-play-state	再生と一時停止	running(再生中) paused(一時停止)

animationで利用するプロパティ一覧

上記のように各プロパティごと別々に記載しても問題はないのですが、animationプロパティを使うことで1行で書くことができます。

記述の順番はanimationで利用するプロパティ一覧の表の上から順に記載します。

animation-nameとanimation-durationは必須なので記述しないと動作しません。

animation: キーフレーム名 10s linear ...

1行でまとめて書くことが必須ではないので、状況に応じて使い分けましょう。

実際にそのまま使うことはないと思います・・・

音楽と合わせて音量によって変わっているみたいな演出ができそう

See the Pen XWNGqeM by Yusei Ishii (@seiyu-nico) on CodePen.