こんにちは、せぃゆーです。
以前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プロパティを使うことで1行で書くことができます。
記述の順番はanimationで利用するプロパティ一覧の表の上から順に記載します。
animation-nameとanimation-durationは必須なので記述しないと動作しません。
animation: キーフレーム名 10s linear ...
1行でまとめて書くことが必須ではないので、状況に応じて使い分けましょう。
サンプル
横棒が10秒かけて伸びていく場合
実際にそのまま使うことはないと思います・・・
See the Pen キーフレーム1 by Yusei Ishii (@seiyu-nico) on CodePen.
横棒の長さがランダムに変わっている
音楽と合わせて音量によって変わっているみたいな演出ができそう
See the Pen XWNGqeM by Yusei Ishii (@seiyu-nico) on CodePen.
コメント