CSSキーフレームアニメーションジェネレータ
プリセットアニメーション（バウンス、シェイク、パルス、フェードイン、スライドイン、スピン、スウィング、ラバーバンド、フラッシュ、ウォブル）からCSS @keyframesアニメーションを生成します。持続時間、イージング、遅延、イテレーション数、方向を設定 — キーフレームとアニメーションショートハンドをコピーして適用します。
入力
1つのアニメーションサイクルの長さ（秒単位）。
アニメーション開始前の待機時間。
A positive whole number, or "infinite" to loop forever.
出力
このツールを使う他の方法
REST API
curl -X POST https://api.iotools.cloud/v1/tool/css-keyframe-animation-generator \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"animationType": "fadeIn",
"duration": "1",
"timingFunction": "ease-in-out",
"delay": "0",
"iterationCount": "1",
"direction": "normal"
}'ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。
AIエージェントに依頼する
Use the IOTools `css-keyframe-animation-generator` tool (CSS Keyframe Animation Generator) on this input:
YOUR_INPUT_HEREIOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-keyframe-animation-generator/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSSキーフレームアニメーションジェネレータ — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
| API/MCP 1回あたりの費用 | 5クレジットから |
|---|---|
| クレジットが足りませんか? | 料金を見る |
次の方法でも利用可能
ガイド
CSSキーフレームアニメーションは、@keyframesアットルールを使用してアニメーションサイクル中のステップ（0%～100%）を説明し、animationショートハンドプロパティを使用して、持続時間、イージング、遅延、繰り返し回数、方向とともにこれらのステップを要素に適用します。キーフレームアニメーションにより、ボタンをパルス表示させたり、カードをフェードインさせたり、通知アイコンを揺らしたり — すべてJavaScriptなしで、ブラウザのコンポジタスレッドでスムーズで効率的なモーションを実現できます。
このジェネレータは両方の部分を生成します：選択したプリセットの正しいパーセンテージストップとプロパティを持つ@keyframesブロック、およびそれを適用する対応する.animated-element { animation: ...; }ルール。両方をスタイルシートにコピーして、.animated-elementをあなた自身のセレクタに置き換えます。
使用方法
- プリセットを選択 — バウンス、シェイク、パルス、フェードイン、左からスライドイン、スピン、スウィング、ラバーバンド、フラッシュ、またはウォブル。各プリセットは、Animate.cssのようなアニメーションライブラリで人気のある確立された効果に基づいた、既製の
transform/opacityステップシーケンスです。 - 期間を秒単位で設定 — 1つの完全なサイクルがどのくらい続くか。
- タイミング関数を選択 —
ease、ease-in、ease-out、ease-in-out、またはlinear— 加速曲線を制御するため。 - 遅延を秒単位で設定 — アニメーション開始前に待機させたい場合。
- イテレーション数を設定 —
1や3などの正の整数、または永遠にループするためのinfinite。 - 方向を選択 —
normalは各サイクルで前方に再生、reverseは後方に再生、alternateは他の各サイクルで方向を反転、alternate-reverseは反転して開始して反転。 - 生成されたCSSをコピーしてスタイルシートに貼り付けるか、
.cssファイルとしてダウンロードします。
よくある質問
セレクタが.animated-elementなのはなぜですか？
これはCSSが貼り付け可能な状態になるようにプレースホルダです — アニメーションしたい要素に合わせて名前を変更します（クラス、ID、またはいずれかのセレクタ）。
これらのプリセットをHTMLの任意の要素で使用できますか？
はい。@keyframesアニメーションはanimationプロパティを介して任意の要素に適用されます。一部のプリセット（左からスライドインなど）は、定義されたディメンションを持つブロックレベル要素で最適に見えます。
iteration-count: infiniteと数値の違いは何ですか？
数値はアニメーションをその回数だけ実行してから最後のフレームで停止します（animation-fill-modeで別に指定されていない限り）。infiniteは永遠に繰り返します — スピンプリセットのようなローダーやスピナーに役立ちます。
これらのアニメーションはページのパフォーマンスに影響しますか？
transformとopacityをアニメーション化する（ここのすべてのプリセットで使用）は、最新のブラウザではGPUアクセラレータされており、スムーズなCSSアニメーションに推奨されるアプローチです — width、top、またはmarginなどのレイアウトプロパティをアニメーション化するより低コストです。
1つの要素で複数のプリセットを組み合わせることができますか？
このツール内では直接はできませんが、2つの生成されたブロックを取得した後、カンマで区切られた複数のanimationショートハンド値を手動でリストできます。ただし、それらの@keyframes名が競合しないことを確認してください。
プライバシー
すべてはブラウザ内でローカルに実行されます — 設定がデバイスを離れることはなく、CSSがサーバーに送信されて生成されることはありません。