animation
中級読み方：アニメーション｜英語：Animation
CSSだけで要素を動かすプロパティで、@keyframes と組み合わせて使うよ。
やさしい説明
animationは、CSSだけで要素を動かすプロパティです。JavaScriptなしでアニメーションが作れます。
@keyframes で「どう動くか」を定義し、animation プロパティで「どの要素に・何秒で・何回」適用するかを指定します。
ローディングスピナー、フェードイン、バウンスなど、Webサイトでよく見る動きはほとんどCSSアニメーションで作れます。
具体例・使い方
/* フェードインアニメーション */
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in {
animation: fadeIn 0.6s ease-out;
}
/* 無限回転（ローディングスピナー） */
@keyframes spin {
to { transform: rotate(360deg); }
}
.spinner {
animation: spin 1s linear infinite;
}animationプロパティの書き方
/* 個別に指定する書き方 */
.box {
animation-name: fadeIn; /* @keyframesの名前 */
animation-duration: 1s; /* アニメーション時間 */
animation-timing-function: ease; /* 速度変化（ease/linear/ease-in等） */
animation-delay: 0.3s; /* 開始前の待機時間 */
animation-iteration-count: 1; /* 繰り返し回数（infinite で無限） */
animation-fill-mode: forwards; /* 終了後の状態（forwards = 最終状態を維持） */
}
/* shorthand（まとめて書く） */
.box {
animation: fadeIn 1s ease 0.3s 1 forwards;
}よく使うアニメーションパターン
/* バウンス（注目させる） */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
/* パルス（点滅風） */
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.4; }
}
/* スライドイン（右から） */
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}transform と opacity を動かすアニメーションはGPUで処理されるため、パフォーマンスが高いです。width や margin のアニメーションはレイアウト再計算が発生して重くなります。
いつ使う？
- ページ読み込み時のフェードイン・スライドイン
- ローディングスピナー（データ取得中の待機表示）
- 注目させたい要素のバウンス・点滅
- 通知バッジのパルスアニメーション
- スクロールで画面内に入ったときの演出
間違いやすいポイント
❌ animationとtransitionを混同する
transition は「状態変化時（hover等）に滑らかにする」もの。animation は「自動で動き続ける」ものです。ホバーエフェクトなら transition、自動再生なら animation を使います。
❌ animation-fill-mode を忘れる
デフォルトでは、アニメーション終了後に元の状態に戻ります。フェードインで表示したままにしたい場合は animation-fill-mode: forwards を指定しましょう。
よくある疑問
Q: animationを無限に繰り返すには？
A: animation: spin 1s linear infinite; のように infinite を追加します。デフォルトは1回だけ再生です。
Q: animationとtransitionの違いは？
A: transitionは状態変化（hover等）のアニメーション。animationは自動で再生でき、複雑な動き（途中で方向転換等）も可能です。
Q: アニメーションが動かないときは？
A: ①@keyframesの名前がanimation-nameと一致しているか ②durationが0になっていないか ③display: noneの要素に適用していないか、を確認しましょう。
関連用語
📖 関連レッスン
レッスンを見る →