design
無料
サインアップ不要
QR コード生成
ライブプレビュー、タイミングコントロール、cubic-bezierイージングエディターでCSS @keyframesアニメーションをビジュアルで作成します。
ツールを読み込み中…
このツールについて
1行もコードを書かずにCSSアニメーションをデザインできます。フェード、スライド、バウンス、回転、スケール、シェイク、フリップ、パルス、スイング、またはカスタムアニメーションタイプから選択し、時間、遅延、繰り返し回数、方向、fill-modeを細かく調整してください。ドラッグして編集できるcubic-bezierカーブを含むイージング関数を選択し、アニメーション要素がリアルタイムで更新されるのを見てください。生成された@keyframesブロックとアニメーションの省略形はスタイルシートに直接コピーする準備ができています。
使い方
- 1 ドロップダウンからアニメーションタイプを選択してください（例：バウンス、フェード、回転）。
- 2 タイミング設定を調整してください：時間、遅延、繰り返し回数、方向、fill-mode。
- 3 イージング関数を選択するか、cubic-bezierハンドルをドラッグしてカスタムカーブを作成してください。
- 4 コードパネルから生成されたCSSをコピーしてスタイルシートに貼り付けてください。
よくある質問
関連ツール