CSS Animation Generator
Build CSS keyframe animations with live preview.
Box
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.element {
animation: fadeIn 1s ease 0s 1 normal both;
}このツールについて
CSSアニメーションジェネレーターは、キーフレームプリセット、タイミング、持続時間、遅延、繰り返し設定を構成して、滑らかなCSSアニメーションを作成します。ライブプレビューでアニメーションを確認し、完全な@keyframesルールとanimation短縮形をCSSに直接コピーできます。
transformとopacityプロパティを使用するCSSアニメーションはGPUで合成され、レイアウトやペイントをトリガーしないため、パフォーマンスが効率的です。
使い方
- ドロップダウンからアニメーションタイプを選択します。
- 持続時間を設定します（例：0.5s、2s）。
- イージングを制御するタイミング関数を選択します。
- オプションでアニメーション開始前の遅延を設定します。
- 繰り返し回数を設定します（数値またはinfinite）。
- リプレイでプレビューし、コピーでCSSをエクスポートします。
活用事例
フロントエンド開発者はフェードやスライドアニメーションでコンテンツ読み込み時の体感パフォーマンスを向上させます。UIデザイナーはボタンのパルスや通知のシェイクなどのマイクロインタラクションをプロトタイプします。
よくある質問
- fill-mode: bothとは何ですか？ — アニメーションは開始前（遅延を考慮）に開始スタイルを適用し、終了後に終了スタイルを保持します。最も一般的に有用な設定です。
- アニメーションを永遠にループするには？ — 繰り返し回数をinfiniteに設定します。
- CSSアニメーションはJavaScriptアニメーションより優れていますか？ — シンプルな宣言的エフェクトにはCSSアニメーションが推奨されます。複雑なシーケンシングやインタラクティビティにはJavaScriptがより多くの制御を提供します。