CSSアニメーションジェネレーター
CSSキーフレームアニメーションをタイムラインエディター、イージングカーブ、ライブプレビューで視覚的に構築します。
このツールについて
CSSアニメーションジェネレーターは、CSSを手書きせずに複雑な@keyframesアニメーションを作成できる無料のブラウザベースビジュアルエディターです。コードエディターとブラウザを切り替えて値を調整する代わりに、インタラクティブなタイムラインとスライダーでアニメーションをデザインし、ライブプレビューで結果を確認してから、生成されたCSSをプロジェクトにコピーできます。
CSSキーフレームアニメーションは、フロントエンド開発者のツールキットで最も強力なツールの一つです。パーセンテージポイントで定義されたタイムライン上で、ほぼすべてのCSSプロパティをアニメーション化できます。このツールは最も一般的にアニメーション化されるプロパティに焦点を当てています：transform（translate、rotate、scale）、opacity、background-color。これらは現実世界のアニメーション用途の大部分をカバーしており、入場エフェクトやローディングスピナーから注目を引くパルスやホバートランジションまで対応します。
ジェネレーターは、デュレーション、タイミング関数（カスタムcubic-bezierカーブ含む）、ディレイ、繰り返し回数、方向、フィルモードなど、すべての標準アニメーション設定プロパティに対応しています。フェードイン、スライドイン、バウンス、パルス、スピン、シェイク、スウィングなど、一般的なパターンの9つの組み込みプリセットがあります。各プリセットは適用後に完全にカスタマイズできるため、固定された結果に縛られることはありません。
すべての処理はブラウザ内で完全に行われます。データがサーバーに送信されることはなく、第三者トラッキングスクリプトもありません。生成されるCSSはすべてのモダンブラウザでベンダープレフィックスなしで動作する標準的な@keyframes構文を使用します。出力をコピーしてスタイルシートに貼り付けるだけです。
使い方
- プリセットアニメーションから開始するか、デフォルトの0%と100%の2つのキーフレームからスクラッチで始めます。
- ビジュアルタイムライン上のキーフレームドットをクリックして選択します。下にキーフレームエディターパネルが表示されます。
- スライダーで選択したキーフレームのtransformプロパティ（translateX、translateY、rotate、scale）、opacity、background-colorを調整します。
- 追加をクリックして新しいキーフレームを挿入します。ツールはタイムライン上の最大の隙間に自動的に配置します。
- アニメーションプロパティパネルでデュレーション、タイミング関数、ディレイ、繰り返し回数、方向、フィルモードを設定します。
- ライブプレビューがリアルタイムで更新されます。再生、一時停止、リスタートボタンで再生を制御します。
- 生成されたCSSコードを確認し、Copy CSSをクリック（またはCtrl+Shift+Cを押す）してクリップボードにコピーします。
よくある質問
CSS @keyframesアニメーションとは何ですか？
CSS @keyframesを使うと、アニメーションシーケンスの中間ステップを定義できます。アニメーション中の特定のポイント（0%、50%、100%など）で要素がどのようなスタイルを持つべきかを指定し、ブラウザがそれらの間をスムーズに補間します。animationショートハンドプロパティと組み合わせて、デュレーション、タイミング、ディレイ、繰り返し回数、方向、フィルモードを制御できます。
タイミング関数/イージングカーブとは何ですか？
タイミング関数はアニメーションの速度曲線を定義します。キーフレーム間でアニメーションがどのように進行するかを決定します。組み込みオプションにはease（ゆっくり開始、速い中間、ゆっくり終了）、linear（一定速度）、ease-in（ゆっくり開始）、ease-out（ゆっくり終了）、ease-in-out（ゆっくり開始と終了）があります。より細かい制御には、4つの数値でカスタムcubic-bezier()カーブを定義できます。
animation-fill-modeは何をしますか？
animation-fill-modeプロパティは、アニメーション開始前と終了後の要素のスタイルを制御します。none（デフォルト）はスタイルが元の値に戻ります。forwardsはアニメーション終了後も最終キーフレームのスタイルを維持します。backwardsはディレイ期間中に最初のキーフレームのスタイルを適用します。bothはforwardsとbackwardsの両方の動作を組み合わせます。
このツールでどのCSSプロパティをアニメーション化できますか？
このツールは最も一般的にアニメーション化され、パフォーマンスに優れたプロパティに焦点を当てています：transform（translateX、translateY、rotate、scale）、opacity、background-color。これらのプロパティはほとんどのブラウザでハードウェアアクセラレーションされ、現実世界のアニメーションニーズの大部分をカバーします。他のプロパティについては、生成されたCSSコードを直接編集できます。
生成されたCSSはクロスブラウザ互換ですか？
はい。CSS @keyframesとanimationプロパティはChrome、Firefox、Safari、Edgeを含むすべてのモダンブラウザでサポートされています。ベンダープレフィックスは不要です。生成されるコードは、任意のスタイルシートに直接貼り付けられるクリーンな標準CSSです。
データは安全ですか？
はい。CSSアニメーションジェネレーターはブラウザ内で完全に動作します。すべてのキーフレーム値とアニメーション設定はマシン上に留まります。サーバーリクエスト、データ収集、第三者スクリプトは一切ありません。CSSはJavaScriptを使用してローカルで生成され、デバイスから送信されることはありません。
animation-directionのnormalとalternateの違いは何ですか？
normalでは、アニメーションは毎回0%から100%に再生されます。alternateでは、奇数回は順方向、偶数回は逆方向に再生され、滑らかな往復エフェクトを作成します。パルスするボタンやバウンスする要素など、サイクル間のシームレスな遷移が必要なループアニメーションに便利です。
関連ツール
テキストシャドウ生成
オフセット、ブラー、色のスライダーでCSSテキストシャドウ効果をビジュアルに設計します。
ボックスシャドウ生成
オフセット、ブラー、スプレッド、色のスライダーでCSSボックスシャドウをビジュアルに設計します。
CSSグラデーション生成
リニア、ラジアル、コニックCSSグラデーションをカラーストップと角度制御で視覚的に作成します。
CSSレイアウト生成
FlexboxとCSS Gridレイアウトをビジュアルに構築し、ライブプレビューとCSSコードを生成します。
CSSイージング関数エディター
cubic-bezier()イージング関数をドラッグ可能なコントロールポイントで視覚的に編集します。アニメーションプレビューと比較モード付き。
CSSトランジションジェネレーター
CSSトランジションプロパティをビジュアルに生成します。プロパティ、duration、タイミング関数、delayの制御とライブプレビュー付き。
SVGパスエディター
SVGパスのd属性をドラッグ可能なコントロールポイントで視覚的に編集します。コマンドパレット、ベジェ曲線ハンドル、リアルタイムプレビュー付き。
CSS Transformプレイグラウンド
CSS Transform関数をビジュアルに実験します。translate、rotate、scale、skew、3D変換をライブプレビューで構築。