🎬 CSSキーフレームビルダー

概要

CSSキーフレームビルダーを使えば、@keyframesアニメーションを一行もコードを手書きせずに作成できます。3つの主要ストップ（0%・50%・100%）でtransformプロパティ（X・Y方向のtranslate、scale、rotate）とopacityを設定し、アニメーション時間・タイミング関数（ease・linear・ease-in・ease-out・ease-in-outまたはカスタムcubic-bezier）・繰り返し回数（有限またはinfinite）をパネルで自由に調整できます。ライブアニメーションプレビューが即座に更新されるため、動きがしっくりくるまで値を微調整できます。準備ができたらコピーをクリックすると、完全な@keyframesブロック（animationショートハンドを含む）がクリップボードにコピーされ、スタイルシートにそのまま貼り付け可能です。すべてブラウザ内で動作し、ファイルのアップロードもデータ送信も一切ありません。

使い方

1. 0%ストップ（アニメーションの開始点）でtranslate X/Y・scale・rotateとopacityの値を設定してください。
2. 50%ストップの値を調整して動作の中間点を定義するか、デフォルト値のままにしてシンプルな2状態トランジションを作成してください。
3. 100%ストップ（終了状態）の値を設定し、続いて時間（秒）・タイミング関数・繰り返し回数を設定してください。
4. ライブプレビューがリアルタイムで更新されるのを確認しながら、アニメーションが思い通りになるまで値を微調整してください。
5. 「CSSをコピー」をクリックして完全な@keyframesブロックとanimationプロパティをクリップボードにコピーし、そのままスタイルシートに貼り付けてください。

よくある質問

どのtransformプロパティをアニメーションできますか？

translateX・translateY・scale・rotateとopacityをアニメーションできます。各プロパティは0%・50%・100%のキーフレームストップで独立して設定されます。

どのタイミング関数が使えますか？

ease・linear・ease-in・ease-out・ease-in-outのプリセットに加え、カスタムcubic-bezierオプションも用意されており、独自の加速カーブを作成できます。

アニメーションを永遠にループさせることはできますか？

はい。繰り返し回数をInfiniteに設定すると、生成されるCSSにanimation-iteration-count: infiniteが使用され、アニメーションが継続的にループします。

このツールを使うためにCSSの知識は必要ですか？

いいえ。ビルダーは完全にビジュアルで操作できます — スライダーを動かしてドロップダウンから値を選ぶだけです。CSSは自動的に生成され、どんなプロジェクトにもそのままコピーして使えます。

生成されたCSSはすべての最新ブラウザと互換性がありますか？

はい。出力には標準の@keyframesとanimationショートハンドプロパティが使用されており、ベンダープレフィックスなしでChrome・Firefox・Safari・Edgeを含むすべての最新ブラウザでサポートされています。