使い方
系統を選び、数値を調整してPlayで動きを確認します。Auto PlayをONにすると、設定の確定時に再生します。CSSをコピーして、対象要素にanimation-targetクラスを付けてください。
よくある質問 (FAQ)
CSSアニメーションジェネレーターとは？
基本の6系統から動きを選び、プレビューを見ながら距離・強さ・時間などを調整してCSSを作るツールです。
ease・ease-in・ease-out・ease-in-outの違いは？
easeは緩やかに始まり途中で速くなって緩やかに終わります。ease-inは徐々に加速、ease-outは徐々に減速、ease-in-outは始めと終わりが緩やかです。linearは一定の速さです。
CSSアニメーションの時間は変更できますか？
はい。時間は0.1〜5秒、開始遅延は0〜5秒の範囲で調整できます。スライダーと数値入力のどちらでも変更できます。
アニメーションを繰り返すことはできますか？
1回・2回・3回・無限から選べます。Fade・Slide・Zoom・Rotateは1方向の動きのため、複数回繰り返すと各回の開始時に初期状態へ戻ります。自然に往復させたい場合は animation-direction: alternate; を追加できます。
フェードしながらスライドできますか？
はい。Slide・Zoom・Rotateでは「フェードを併用」を切り替えられます。初期状態はONです。Shake・Pulseにはフェード設定はありません。
生成したCSSはそのままWebサイトで使えますか？
生成CSSをスタイルシートに貼り付け、対象の要素にanimation-targetクラスを付けてください。必要に応じてクラス名とkeyframes名を変更できます。既存のtransform・animation指定と重ならない要素で使ってください。