アニメーションについて

cssには大きく分けて2つのアニメーションがある。

transitonについて

1. 簡単なアニメーションで動きはシンプルで細かいカスタムは不可。
2. :hover や :activeなどがトリガーとなりアニメーションが動く、逆を言うと :hover などの要素の変化がなければtransitonは動作しない。
3. 使い所は工数をかけずにサクッとhover時に変化を持たせたいときに使うことが多い。よくあるのはボタンのホバー時の色変化や文字の変化など。

animationについて

1. transitionに比べanimationプロパティは複雑なアニメーションを作成できる。
2. トリガーは特になく、自動的にアニメーションが開始する（発火タイミングは指定可能）
3. 複雑なアニメーションや繰り返し動作などがあるときはこちらのanimationプロパティを使用する

主な違い

特性	animation	transition
開始タイミング	自動で開始	状態変化（hover、activeなど）で開始
動きの柔軟性	複雑な動きを設定可能	単純な開始から終了の動き
ループ	繰り返し設定（infinite）が可能	繰り返しは不可
使用用途	シーケンスアニメーションや繰り返し動作	状態変化による短いアニメーション

※シーケンスアニメーションとは複数のステップに分かれ位置や色大きさなど時間経過と主に順番に実行されれるアニメーションのこと。
※要するに @keyframeで0%, 50%, 100%とアニメーションのステップを指定でき各ステップで位置や色の変化を記載でき0%から順番に実行されていくこと。

CSS Animation プロパティのまとめ

animationプロパティには設定できる項目が結構あるのでメモ。

指定できる項目

1. @keyframe名（必須）

   • アニメーションの名前、fade-inとかよく見る。そのアニメーションがどんな動きなのかを名前にすると良さそう。

2. duration（秒数）（必須）

   • アニメーションの継続時間。
     • 例：2s、500ms

3. timing-function（時間関数）

   • アニメーションのスピードカーブ。
     • linear（等速）
     • ease（デフォルト）
     • ease-in、ease-out、ease-in-out
     • cubic-bezier(n, n, n, n)（カスタムベジェ曲線、これがややこしい）

4. delay（遅延）

   • アニメーションの開始までの遅延時間。
     • 例：1s、200ms

5. iteration-count（繰り返し回数）

   • アニメーションの繰り返し回数。
     • 例：3（数値）、infinite（無限）

6. direction（再生方向）

   • アニメーションの再生方向。
     • normal（デフォルト、通常の再生）
     • reverse（逆方向に再生）
     • alternate（通常と逆を交互に再生）
     • alternate-reverse（逆と通常を交互に再生）

7. fill-mode（終了後の状態）

   • アニメーション終了後のスタイル。
     • none（デフォルト、元の状態に戻る）
     • forwards（終了時の状態を維持）
     • backwards（開始前の状態を適用）
     • both（開始前と終了後の両方を維持）

8. play-state（再生状態）

   • アニメーションを再生するか一時停止するか。
     • running（デフォルト、再生中）
     • paused（一時停止）

---

結局使うのはどこらへん？

必須項目以外でよく使うのはtiming-function と delay とかだと思っている。
あとは調べればなんとかなるので覚えなくても良さそう。