animation
中級読み方：アニメーション｜英語：Animation
CSSだけで要素を動かすプロパティで、@keyframes と組み合わせて使うよ。いつ使う？ ローディングスピナーを回したい、要素をフェードインさせたい、注目させたい要素を揺らしたいときに使うよ。間違いやすいポイント: animation プロパティの名前と @keyframes の名前が一致していないと動かないよ。また、animation-duration（時間）を指定し忘れると0秒で終わって見えないよ。
やさしい説明
animationは、CSSだけで要素を動かすプロパティです。JavaScriptなしでアニメーションが作れます。
@keyframesで「どう動くか」を定義し、animationプロパティで「どの要素に・何秒で・何回」適用するかを指定します。
ローディングスピナー、フェードイン、バウンスなど、Webサイトでよく見る動きはほとんどCSSアニメーションで作れます。
具体例・使い方
/* フェードインアニメーション */
.fade-in {
animation: fadeIn 1s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* 無限回転（ローディング） */
.spinner {
animation: spin 1s linear infinite;
}
@keyframes spin {
to { transform: rotate(360deg); }
}いつ使う？
ページ読み込み時のフェードイン、ローディングスピナー、注目させたい要素のバウンス、スクロールで現れる演出などに使います。
間違いやすいポイント
❌ animationとtransitionを混同する
transition は「状態変化時（hover等）に滑らかにする」もの。animation は「自動で動き続ける」ものです。ホバーエフェクトならtransition、自動再生ならanimationです。
よくある疑問
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の要素に適用していないか、を確認しましょう。
関連用語
📖 関連レッスン
レッスンを見る →