CSSアニメーションジェネレーター — GUIでkeyframesを作成・コード出力

使い方

1. プリセット選択 — 「Fade In」「Bounce」などのプリセットボタンをクリックすると、キーフレームとタイミングが自動入力されます。
2. プレビュー要素の選択 — 四角・丸・テキストから対象要素を選んでください。
3. タイミング設定 — duration（再生時間）・delay（開始遅延）・iteration-count（繰り返し）・direction（再生方向）・timing-function（加速度）をスライダーや選択肢で調整します。
4. キーフレーム編集 — 0% / 50% / 100% などの各コマでtransform・opacity・color・backgroundを個別に設定できます。
5. 再生ボタンで確認 — 「再生」ボタンを押すとリアルタイムでアニメーションが動作します。
6. CSSコードをコピー — 「コピー」ボタンで@keyframesとanimationプロパティを一括コピーし、自分のプロジェクトに貼り付けてください。

CSSアニメーションとは

CSSアニメーションはJavaScriptなしでHTML要素に動きをつける技術です。@keyframesルールで各コマの状態を定義し、animationプロパティで要素に適用します。主なプロパティはanimation-duration（再生時間）、animation-delay（開始遅延）、animation-iteration-count（繰り返し回数）、animation-direction（再生方向）、animation-timing-function（イージング）です。フェード・スライド・バウンスなどWebサイトのUXを高める演出に広く使われており、GPUアクセラレーションが効くtransformとopacityを組み合わせるとパフォーマンスも最適化できます。

cubic-bezierとは

cubic-bezierはアニメーションの速度変化（イージング）をカスタムで定義する関数です。4つの値 cubic-bezier(x1, y1, x2, y2) で制御点を指定し、ease・ease-in・ease-outなどの既定値では表現できない独自の動きを作れます。当ツールのcanvasエディタでは制御点をドラッグして視覚的に曲線を確認できます。