CSSアニメーションキーフレームジェネレーターとは
CSSアニメーションキーフレームジェネレーターは、プリセットモーションパターンから完全なCSS @keyframesルールとanimation shorthandプロパティを作成します。
クイックアンサー
9つのアニメーションプリセットから選択し、duration、easing、delay、iteration、direction、fill modeをカスタマイズ。完全な@keyframesルールとanimation shorthand CSSを取得。
Last updated: 2026-06-11
制限事項
- キーフレームルールはfrom/to構文を使用。カスタムパーセンテージは手動追加が必要。
- ツールは一度に1つのアニメーションのみ生成。
- ライブプレビューは静的要素を使用。
Sources:MDN Web Docs · W3C Specifications · jquery.app on GitHub
使い方
- アニメーションプリセットを選択：Fade In/Out、Slide Down/Up、Scale In、Spin、Pulse、Bounce、Shake。
- パラメータをカスタマイズ：duration、easing、delay、iteration、direction、fill mode。
- 必要に応じてアニメーション名を編集。
- ライブプレビューを観察。Replayボタンで再確認。
- 完全な出力をスタイルシートにコピー。
主な用途
- fadeInとease-out、fill-mode forwardsでモーダル用フェードインアニメーションを生成。
- Spinプリセットと線形イージング、無限反復でローディングスピナー用回転アニメーションを作成。
- PulseプリセットでCTAボタン用の注意を引くパルスアニメーションを構築。