CSSアニメーションの書き方｜keyframes・イージング・終了後の状態

2026-07-28 公開

まず動かすための最小コード

次の例では、要素を少し下から表示しながら不透明にします。キーフレーム名のfade-upは、利用側のanimationにも同じ名前を書く必要があります。

.notice {
  animation: 600ms ease-out 0s 1 normal both fade-up;
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

fromは0%、toは100%と同じ意味です。途中の状態が必要なら、40%や75%のようなキーフレームを追加できます。

animationの指定を左から読む

animationは複数プロパティの一括指定です。時間の値が2つある場合、最初が再生時間、次が開始までの遅延です。名前と他の値の判別を明確にするため、キーフレーム名は最後に置くと読みやすくなります。

animation: 800ms ease-in-out 150ms 2 alternate both card-pop;

終了後の見た目を残すには

初期値のanimation-fill-mode: noneでは、再生後に通常のCSSへ戻ります。終了時のキーフレームを適用し続けたい場合はforwards、開始前と終了後の両方へ反映したい場合はbothを使います。

イージングの選び方

• linear：一定速度。回転や進捗表示に向く
• ease-out：速く始まり、ゆっくり止まる。要素の登場に使いやすい
• ease-in：ゆっくり始まり、加速する。画面外へ消える動きに使いやすい
• ease-in-out：開始と終了が穏やか。往復する動きに使いやすい
• cubic-bezier(...)：加速カーブを細かく調整する
• steps(...)：連続変化ではなく段階的に切り替える

見た目だけで決めにくい場合は、実際の要素をプレビューしながら比較するのが確実です。

滑らかさとアクセシビリティ

位置や大きさの演出では、可能ならtop、left、widthなどではなく、transformとopacityを中心に組み立てます。また、動きを減らす設定を選んでいる利用者向けにprefers-reduced-motionを用意します。

@media (prefers-reduced-motion: reduce) {
  .notice {
    animation: none;
  }
}

重要な情報をアニメーションだけで伝えず、一時停止できない長い動きや激しい点滅も避けてください。

動かないときの確認項目

1. animation-durationが省略され、初期値の0sになっていないか
2. animationと@keyframesの名前が一致しているか
3. 後から指定したanimationで、先の個別指定を上書きしていないか
4. 同じプロパティを複数のアニメーションで同時に変更していないか
5. 終了後に戻る動作を不具合と誤認していないか。必要ならforwardsかbothを確認する

参考資料

• MDN: animation
• MDN: @keyframes
• MDN: animation-fill-mode
• MDN: prefers-reduced-motion