CSSキーフレームアニメーションジェネレーター
マルチトラックタイムライン上で本物の @keyframes アニメーションを構築。トラックごとに transform、opacity、background-color のストップを設定し、ドラッグ可能なプレイヘッドで補間された中間状態を正確にプレビューできます。
🔒 ブラウザ内で完全に処理されます。ここに入力した内容はアップロードされません。
結果
CSS の @keyframes ルールは、実際には小さなタイムラインです。パーセンテージのチェックポイントのセットで、各チェックポイントはその瞬間にプロパティがどのように表示されるべきかを宣言し、ブラウザがその間を補間します。手作業で構築する場合、複数のプロパティにわたってこれらのパーセンテージチェックポイントを頭の中で保持する必要があります。このジェネレーターは、そのタイムラインを実際に見てドラッグできるものに変えます。プロパティごとに1つの水平レーンがあり、各チェックポイントにストップマーカーがあります。
中心となるのはスクラブプレイヘッドです。0% から 100% の間の任意のポイントにドラッグすると、プレビューボックスはその瞬間の正確な結合状態にジャンプします。最も近いキーフレームではなく、すべてのアクティブなトラックでプレイヘッドを囲む2つのストップの間で計算された、実際の線形補間値です。位置、回転、スケールなどの数値プロパティは単純な数値として補間され、background-color は赤、緑、青の各チャンネルを独立して補間するため、設定した色の間をジャンプするのではなく、中間の色合いをスムーズにフェードします。
複数のトラックが自動的に1つのまとまったアニメーションに結合されます。すべての transform ベースのプロパティ（移動、回転、スケール）は、各キーフレームのパーセンテージで単一の transform 宣言にマージされ、opacity と background-color は実際の手書きCSSと同じように独立した行に保持されます。特定のトラックに明示的なストップがないパーセンテージは、そのプロパティの宣言から意図的に除外されます。ブラウザのキーフレーム補間が、存在するストップ間のギャップを埋めるのは、手入力した @keyframes ルールと同様です。
5つのプリセット（バウンス、シェイク、パルス、フェードイン、スライドイン）は、適切な継続時間、タイミング関数、繰り返し回数を含む、すぐに調整可能な完全なタイムラインをワンクリックで読み込みます。いつでも再生をクリックすると、動的に注入されたスタイルシートを介してその場で生成された実際のCSSアニメーションがプレビュー要素で実行されます。その後、完全な @keyframes ブロックと .animated-element { animation: ... } ショートハンドをコピーして、自分のプロジェクトに直接貼り付けられます。このサイトのすべてのツールと同様に、すべてはブラウザ内でローカルに実行され、何もアップロードされません。