CSS キーフレーム アニメーション ジェネレーター

CSS @keyframes ルールは実際には小さなタイムラインです。一連のパーセンテージ チェックポイントであり、各チェックポイントがその瞬間のプロパティがどうあるべきかを宣言し、その間のすべてをブラウザーが補間します。手動で構築するということは、複数のプロパティにわたって、これらのパーセンテージ チェックポイントのいくつかを頭の中に同時に保持することを意味します。このジェネレーターは、そのタイムラインを実際に表示してドラッグできるものに変換します。つまり、プロパティごとに 1 つの水平レーンがあり、各チェックポイントに停止マーカーが表示されます。

目玉はスクラブ再生ヘッドです。これを 0% ～ 100% の間の任意のポイントにドラッグすると、プレビュー ボックスはその瞬間の正確な組み合わせ状態にジャンプします。最も近いキーフレームではなく、すべてのアクティブなトラックの再生ヘッドを囲む 2 つのストップ間で計算された実際の線形補間値です。位置、回転、スケールなどの数値プロパティは単純な数値として補間されます。背景色は、赤、緑、青の各チャネルを個別に補間します。これにより、カラー トラックは、実際に設定した色の間を飛び越えるのではなく、中間の色相をスムーズにフェードアウトします。

複数のトラックが自動的に 1 つの一貫したアニメーションに結合されます。すべての変換ベースのプロパティ (移動、回転、スケール) がキーフレームのパーセンテージごとに 1 つの変換宣言に結合されますが、不透明度と背景色はそれぞれの行に留まり、実際の手書き CSS とまったく同じように見えます。特定のトラックに明示的なストップがないパーセンテージは、単にそのプロパティの宣言から意図的に省略されています。手動で入力した @keyframes ルールの場合と同じように、ブラウザー独自のキーフレーム補間が、存在するストップの間のギャップを埋めます。

バウンス、シェイク、パルス、フェード、スライドインの 5 つのプリセットにより、ワンクリックで完全なすぐに調整できるタイムライン (適切な持続時間、タイミング機能、リピート回数を含む) がロードされます。任意の時点で [再生] をクリックすると、動的に挿入されたスタイルシートを通じてオンザフライで生成された実際の CSS アニメーションがプレビュー要素上で実行されるのを確認できます。その後、完全な @keyframes ブロックと .animated-element {animation: ... } 短縮表現を独自のプロジェクトに直接コピーします。このサイトのすべてのツールと同様、これらはすべてブラウザーでローカルに実行され、何もアップロードされません。