✨ CSS アニメーションジェネレーター
CSS キーフレームアニメーションをビジュアルに構築—時間・タイミング・繰り返し・変形を設定。本番利用可能な @keyframes CSS をライブプレビューで生成—すべてブラウザ内で完結。
CSS アニメーションジェネレーターについて
このツールは CSS キーフレームアニメーションをビジュアルに構築します。アニメーション種類（バウンス・回転・パルス・スライド・フェード・スイング）を選び、時間・タイミング関数・遅延・繰り返し回数・方向を設定します。プレビューがリアルタイムで再生され、生成された CSS には @keyframes と animation 一括指定の両方が含まれます。
使い方
- アニメーションに名前を付け、時間を設定します。
- タイミング関数を選びます（ease、linear、cubic-bezier など）。
- キーフレームを決めるアニメーション種類を選びます。
- 距離/角度と繰り返し回数を調整します。
- プレビュー更新をクリックし、CSS コピーでプロジェクトに利用します。
よくある質問
"infinite" 繰り返しとは？ アニメーションが無限に繰り返されます。数字（例：3）で固定回数再生できます。
複数の変形を組み合わせられますか？ このツールは1種類の変形のみ生成します。回転+拡大縮小を組み合わせる場合は、キーフレームを手動で編集して transform 値を統合してください。
アニメーション末尾でジャンプするのはなぜ？ 方向を alternate に設定し、各サイクルで逆再生させることでシームレスなループになります。