🎨 CSSアニメーションジェネレーター

プリセットを選んでパラメータを調整するだけで、CSSアニメーションコードを自動生成します。

プリセット

アニメーション設定

duration（再生時間）: 1s

0.1s 5s

delay（遅延）: 0s

0s 3s

timing-function（イージング）

ease linear ease-in ease-out ease-in-out spring

iteration-count（繰り返し）

direction（方向）

fill-mode（終了後の状態）

プレビュー要素

形状

■ 四角

● 円

T テキスト

カラー

ピンクブルーグリーンオレンジパープル

ライブプレビュー

生成されたCSS

CSS クリックしてコピー

CSSアニメーションジェネレーターについて

CSSアニメーションは@keyframesルールとanimationプロパティを組み合わせて実装します。このツールではduration（再生時間）、delay（遅延）、timing-function（イージング）、iteration-count（繰り返し回数）、direction（方向）、fill-mode（終了後状態）を直感的なGUIで設定できます。

生成されたコードはそのままHTMLファイルやCSSファイルに貼り付けて使用できます。JavaScriptは不要で、パフォーマンスに優れたCSSアニメーションを簡単に作成できます。