CSS Animation Generator

使い方

1. 5 つのプリセットから選びます：フェード、スライド、スケール、回転、バウンド。
2. 再生時間（ミリ秒）を設定し、必要なら開始前の遅延も指定します。
3. イージング曲線を選びます。オーバーシュート気味の cubic-bezier は登場演出に効果的です。
4. 反復回数を 1 回から無限まで選びます。
5. Play で現在の設定を再生し、生成された CSS をコピーします。

よくある用途

• マイクロインタラクション — ツールチップやトースト、カード登場の素早いフェード・スライド。
• ローディング状態 — 繰り返すバウンドやスケールでスケルトンを演出。
• keyframes 構文の学習 — パーセント指定のキーフレームと見える動きの対応を把握。
• コミット前の試行 — 実要素で時間の組み合わせを試し、当て推量を減らす。

よくある質問

Q: プリセットはどのプロパティを使いますか？ A: opacity と transform のみです。この 2 つはレイアウト再計算なしでアニメーションできるため、普通の端末でも滑らかに動きます。

Q: keyframe 名が demo-anim なのは？ A: プレビューはその名前で keyframes を注入しています。コピーした CSS ではプロジェクトに合わせて改名してください。keyframes ルールと animation プロパティで名前を一致させるだけです。

Q: プリセットを組み合わせられますか？ A: このツール内では直接できませんが、生成物はただの CSS です。2 つのプリセットのキーフレームを別々のパーセント区間として 1 つのルールに統合すれば組み合わせられます。