フェードイン・バウンスなどのプリセットを選び、時間やイージングを調整してCSSアニメーションを生成します。コピーしてそのまま使えます。
基本の書き方
animation の値は「名前 時間 イージング 遅延 繰り返し 方向 終了後の状態」の順で指定できます。both を付けると、開始前と終了後の状態が保持されます。
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.item {
animation: fadeInUp .6s ease-out both;
}滑らかに動かすコツ
- 動かすプロパティは transform と opacity に絞る（再レイアウトが発生せず軽い）
- width や top のアニメーションは負荷が高くなりがちです
- 時間は0.2〜0.6秒程度が自然に見える範囲です
- 複数の要素を順に出すときは、animation-delay をずらします
配慮すべきこと
動きに敏感な人のために、OSで「視差効果を減らす」設定がされている場合はアニメーションを抑える指定を入れておくと安全です。
@media (prefers-reduced-motion: reduce) {
* { animation: none !important; transition: none !important; }
}よくある質問
Q transitionとanimationの違いは？
transitionは状態変化のときだけ動き、animationはキーフレームで自律的に動きます。繰り返しにはanimationを使います。
Q 動きがカクつくのはなぜ？
レイアウトの再計算が起きるプロパティ（width・top など）を動かしている可能性があります。transformで置き換えると改善します。
Q スクロールで発火させるには？
CSSだけでは難しいため、Intersection Observer で要素が画面に入ったらクラスを付ける方法が一般的です。
Q アニメーションを止める配慮は必要ですか？
prefers-reduced-motion に対応しておくと、動きに敏感な利用者に配慮できます。