cssアニメーションの基本をまとめます。
目指せアニメーションマスター！

cssアニメーションの基本

cssアニメーションは基本的に、animation-name につけた名前に対し、keyframesで動きの変化を指定します。
アニメーションの繰り返しや、変化する時間の調整などの設定も追加できます。

アニメーションの指定方法

アニメーションの定義名(animation-name)

アニメーションの定義名は半角英数字で自由に決めることが可能です。
例えば以下のように指定します。

animation-name: fadeInAnime;

animation-nameでつけた定義名に対し、keyframesでアニメーションの開始から終了までの変化を指定します。
例えば以下のように記述します。

@keyframes fadeInAnime {
  from {
    /* ここに開始のcssを記述 */
  }
  to {
    /* ここに終了のcssを記述 */
  }
}

fromと toではなく%で指定しても大丈夫です。

アニメーションの開始と終了時の状態を指定(animation-fill-mode)

animation-fill-mode: backwards;

• none → 指定なし、初期値
• forwards → 元の状態に戻らずアニメーション最後の状態を維持
• backwards → アニメーションの最初の状態に戻る
• both → backwards と forwards の両方の状態を適用

アニメーション1回分の時間の長さを指定(animation-duration)

animation-duration: 3s;

• 1.5秒なら → 1.5s (初期値は0)

動きをループさせる(animation-iteration-count)

animation-iteration-count: infinite;

• infinite → 無限に再生を繰り返す
• 数値 → 数値で再生回数を指定する(初期値は1)

アニメーションの進行具合を操作(animation-timing-function)

animation-timing-function: ease;

• ease → 初期値：開始時と終了時が緩やかに変化
• ease-in → 開始時は緩やかに変化、終了に近づくと早く変化
• ease-out → 開始時は早く変化し、終了時は緩やかに変化
• ease-in-out → 開始時と終了時は、かなり緩やかに変化
• linear → 開始から終了まで一定に変化
• steps(数値, start または end) → パラパラ漫画のように数値をコマ数で変化
• cubic-bezier(数値をカンマ区切りで4つ指定) → 変化の進行具合を3次ベジェ曲線で指定

アニメーションの開始を遅らせる(animation-delay)

animation-delay: 0.5s;

• 3秒なら → 3s (初期値は 0)

アニメーション再生の向きを順方向、逆方向、前後反転のいずれかにするかを決める(animation-direction)

animation-direction: normal;

• normal → 初期値：普通方向の再生で動きを繰り返す
• reverse → 逆方向の再生で絵動きを繰り返す
• alternate → 奇数回では普通方向、偶数回では逆方向の再生で動きを繰り返す
• alternate-reverse → 毎回逆方向の再生、奇数会では逆方向、偶数回では普通方向

省略記法

こんな感じで書くこともできます。

animtion: 定義名 変化時間 進行具合 ループ 何秒目から開始するか ループ　アニメーションの再生の向き;

実際に書くとこんな感じになりますね。

animation: bgchange 20s dase 0s infinite normal;

2つ以上組み合わせるときは、カンマ指定で増やしていきます。

animation: bgchange01 20s ease infinite, bgchange02 3s ease-in-out;

---

今回はアニメーションの基本の中でも、アニメーションの指定方法についてまとめてみました。
次はtransformを使用した要素の変形についてまとめていきたいと思います！
最後までごらんいただきありがとうございました！