この記事の要点

CSS アニメーションは @keyframes でキーフレームを定義し、animation-* プロパティで適用する 主要プロパティ: animation-name / -duration / -timing-function / -delay / -iteration-count / -direction / -fill-mode / -play-state ショートハンド animation で 8 個まとめ書き可能 transition は「状態変化時のなめらかな補間」、animation は「自動再生される時間的変化」— 役割が違う パフォーマンスは transform / opacity のみがコンポジターに乗って GPU 加速、他プロパティは再レイアウト発生 関連: CSS プロパティ

CSS アニメーションとは

CSS アニメーションは、JavaScript を使わずに要素のスタイルを時間的に変化させる仕組みです。@keyframes でアニメーションの中身（どの時点でどんなスタイルか）を定義し、対象要素に animation-* プロパティで適用します。

類似機能の transition が「ある状態 → 別状態の補間」専用なのに対し、animation はキーフレーム列を持ち、自動再生・繰り返し・往復・前後の値保持などが可能です。

基本構文

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.box {
    animation-name: fadeIn;
    animation-duration: 0.6s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;
}

/* ショートハンド */
.box-2 {
    animation: fadeIn 0.6s ease-out both;
}

animation 系プロパティ一覧

プロパティ	意味	主な値
animation-name	適用する @keyframes 名	fadeIn, none
animation-duration	1 サイクルの長さ	0.3s, 1500ms
animation-timing-function	加減速カーブ	ease / linear / ease-in / ease-out / ease-in-out / cubic-bezier(x, y, x, y) / steps(n)
animation-delay	開始遅延	0.2s（負値で途中から開始）
animation-iteration-count	繰り返し回数	1 / 3 / infinite
animation-direction	再生方向	normal / reverse / alternate / alternate-reverse
animation-fill-mode	開始前・終了後の値の扱い	none / forwards / backwards / both
animation-play-state	再生 / 一時停止	running / paused

@keyframes の書き方

キーフレームは from/to またはパーセント指定で記述できます。

/* シンプル: from / to */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* 複数キーフレーム: % 指定 */
@keyframes bounce {
    0%   { transform: translateY(0); }
    40%  { transform: translateY(-30px); }
    70%  { transform: translateY(-15px); }
    100% { transform: translateY(0); }
}

/* 適用 */
.ball {
    animation: bounce 1s ease-in-out infinite;
}

transition との違い

観点	transition	animation
用途	状態変化の補間（hover, focus, クラス追加）	自動再生される独立したアニメ
キーフレーム	不可（始点 → 終点のみ）	可能（@keyframes で複数）
繰り返し	不可	iteration-count で指定
トリガ	プロパティ値が変わったとき	animation-name を指定するだけで自動開始
ループ再生	不可	infinite 可

animation-fill-mode の挙動

値	開始前	終了後
none（既定）	元のスタイル	元のスタイルに戻る
forwards	元のスタイル	100% のスタイルを保持
backwards	0% のスタイルを表示	元のスタイルに戻る
both	0% のスタイルを表示	100% のスタイルを保持

「アニメ後に最終状態を保ちたい」場合は forwards または both を指定。指定し忘れると元の状態に戻ります。

複数アニメーションの組み合わせ

.item {
    /* カンマ区切りで複数アニメ */
    animation:
        fadeIn 0.6s ease-out both,
        rotate 4s linear infinite 0.6s;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

パフォーマンス上の注意

アニメーションは GPU 合成（コンポジット）に乗るかどうかで性能が大きく変わります。transform と opacity のみがコンポジターに乗る代表プロパティで、これらだけ動かすのが最速です。

プロパティ	性能	備考
transform（translate / rotate / scale）	○ 高速（GPU）	推奨
opacity	○ 高速（GPU）	推奨
filter	△ 中速	blur は重い
width / height / margin / padding	× 遅い（再レイアウト）	避ける
top / left / right / bottom	× 遅い（再レイアウト）	transform: translate で代用
background-color	△ 中速（再描画）	可能だが頻繁な変更は注意

prefers-reduced-motion 対応

視覚過敏や乗り物酔いを起こすユーザー向けに、OS 設定でアニメ抑制を希望している場合があります。

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

このメディアクエリで動きを最小化するのがアクセシビリティのベストプラクティスです。

FAQ

Q: アニメ終了後に元に戻ってしまう
A: animation-fill-mode: forwards（または both）を指定する。

Q: hover を外したらリセットされるアニメは？
A: それは transition の用途。hover 状態と通常状態のプロパティ値差を transition で補間する。

Q: 動きをスムーズにしたい
A: transform と opacity 中心で組み、will-change: transform を要素に付ける（多用しすぎない）。

関連: CSS プロパティ