CSSアニメーションジェネレーター
@keyframes とイージングを画面上で。JavaScriptは不要です。
@keyframes slide-up {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.element {
animation: 420ms cubic-bezier(0.16, 1, 0.3, 1) both slide-up;
}
@media (prefers-reduced-motion: reduce) {
.element {
animation: none;
}
}
滑らかに動くのは transform と opacity だけ
CSSアニメーションはJavaScriptを1行も書かずに動きを付けられます。 ブラウザのコンポジタで処理されるため、メインスレッドが詰まっていても滑らかに再生されるのが利点です。
How to use it
-
プリセットを選ぶ
フェード、スライド、スケール、回転などの型から選び、そこから調整していきます。
-
キーフレームを編集する
タイムライン上の各段階で transform と opacity を設定します。
-
タイミングを決める
再生時間、遅延、繰り返し回数、イージング曲線を指定します。
-
コードをコピーする
@keyframes と animation プロパティが揃った状態で出力されます。
カクつく原因はほぼ1つ
width、height、top、left、margin を
アニメーションさせると、フレームごとにレイアウトの再計算が走ります。
transform と opacity だけに絞れば、レイアウトも描画も飛ばして
コンポジタだけで処理されるため、60fpsを維持しやすくなります。
位置を動かしたいときは left ではなく translate を使ってください。
イージングの選び方
画面に入ってくる動きには ease-out、出ていく動きには ease-in が
自然に見えます。現実の物体は急に止まらないためです。linear は機械的な印象になるため、
等速で回り続けるスピナー以外ではあまり使いません。
prefers-reduced-motion への対応
前庭障害のある方にとって、大きな動きは実際に体調不良を引き起こします。
@media (prefers-reduced-motion: reduce) でOSの「視差効果を減らす」設定を尊重し、
アニメーションを無効化するか、動きの少ないフェードに差し替えてください。
このツールが出力するコードには最初からこの指定が入っています。
関連ツール
イージング曲線だけを調整したい場合や、レイアウト自体を組みたい場合は CSSグリッドジェネレーター、 色の変化を作るなら グラデーションジェネレーター も あわせてどうぞ。
Frequently asked questions
CSSアニメーションはどう作りますか？
@keyframes で動きの各段階を定義し、animation プロパティで対象の要素に適用します。JavaScriptは不要で、ブラウザのコンポジタで動くため滑らかに再生されます。transition と animation の違いは何ですか？
transition は状態が変わったとき（ホバーなど）に2点間を補間するもので、animation は複数の中間地点を持ち、状態変化がなくても自動で再生・ループできます。ホバー効果なら transition、ローディング表示なら animation が適しています。アニメーションがカクつくのはなぜですか？
width、height、top、left などレイアウトを再計算させるプロパティをアニメーションさせているためです。transform と opacity だけに絞ると、レイアウトと描画を飛ばしてコンポジタだけで処理されるため滑らかになります。イージングはどう選べばいいですか？
ease-out、出ていく動きには ease-in が自然に見えます。linear は機械的に見えるため、回転するスピナー以外ではあまり使いません。cubic-bezier() で独自の曲線も指定できます。アニメーションを止めたいユーザーへの配慮は必要ですか？
@media (prefers-reduced-motion: reduce) でOSの設定を尊重し、アニメーションを無効化または簡略化してください。このツールが出力するコードにはこの指定が含まれています。