CSSアニメーション作成 CSS Animation Generator CSSアニメーションを直感的に作れるジェネレーターです。時間・遅延・繰り返し回数・イージング・方向・フィルモードなどを調整すると、プレビューが即反映され、動きをその場で確認できます。「再生」ボタンを押せば何度でもアニメーションをテストでき、キーフレームも自動生成されるため、手書きで複雑なCSSを書く手間がなくなります。 アニメーション名 継続時間 秒 遅延 秒 無限 1回 2回 3回 4回 5回 6回 繰り返し回数 ease(ゆっくり→速→ゆっくり) ease-in(だんだん加速) ease-out(だんだん減速) ease-in-out(緩急あり) linear(一定速度) イージング normal(順方向) reverse(逆方向) alternate(往復) alternate-reverse(往復・逆向き開始) 方向 none(再生中のみ反映) forwards(終了時の状態を保持) backwards(開始前から初期状態を適用) both(前後どちらも保持) フィルモード 0% { transform: translateX(0); } 50% { transform: translateX(50px); } 100% { transform: translateX(0); } キーフレーム ▶ プレビュー コピー