CSSアニメーションジェネレーター について
ライブプレビュー、タイミング制御、すぐに使えるコード付きのCSSキーフレームアニメーションを構築します。すべてブラウザ内で動作します。
CSSアニメーションジェネレーター の使い方
- 1アニメーションタイプを選択します：バウンス、フェードイン/アウト、スライドイン/アウト、シェイク、回転、またはパルス。
- 2持続時間と遅延を調整してアニメーションの速度と開始タイミングを制御します。
- 3繰り返し回数（ループ数）を設定するか、連続アニメーションには「無限」を選択します。
- 4方向（ノーマル、リバース、オルタネート）とタイミング関数（ease、linear、cubic-bezier）を選びます。
- 5「リプレイ」をクリックしてアニメーションをプレビューし、CSS出力をコピーします。
ヒント
- オルタネート方向は自然な往復エフェクトを作成します。注目を集めるUI要素に最適です。
- カスタムcubic-bezierカーブを使用すると、ブランドの雰囲気に合ったユニークなイージングを作成できます。
- マイクロインタラクションには300ms以下、トランジションには500-1000msのアニメーション持続時間にしてください。
無料 vs 有料の制限
無料：基本アニメーション。Starter以上：プレミアムアニメーションタイプ。
OneKitTools チーム更新日 2.21.4