CSS の @keyframes を作り、そのままコピー
@keyframes kivMotion、1400ms、ease、1 回、0%・50%・100% のキーフレームから始まり、フレームごとに位置・移動・回転・拡大率・不透明度を編集できます。プレビューは出力パネルと同じ animation 宣言を再生し、出力される 2 つのブロックは位置の昇順に並びます。
ブラウザ内でローカルに実行 · @keyframes · アニメーション · タイミング
K
@keyframes kivMotion、1400ms、ease、1 回、0%・50%・100% のキーフレームから始まり、フレームごとに位置・移動・回転・拡大率・不透明度を編集できます。プレビューは出力パネルと同じ animation 宣言を再生し、出力される 2 つのブロックは位置の昇順に並びます。
ブラウザ内でローカルに実行ページは @keyframes kivMotion、1400ms、ease、1 回、キーフレームは 0%、50%、100% の状態で開きます。プレビューは出力パネルが表示する animation 宣言をそのまま使うので、再生した動きがコピーするコードになります。
各数値コントロールには実測した範囲があります。継続時間 100〜20000ms、位置 0〜100%、不透明度 0〜1、移動 ±300px、回転 ±720°、拡大率 0〜4、キーフレームは 2〜8 個です。範囲外の値はフィールドを離れた時点で上限・下限に書き戻され、空欄にするとゼロではなく直前の値に戻ります。
出力は @keyframes ルール（位置の昇順に並んだ 1 フレーム 1 ブロック）と .animated-element 宣言です。追加した順に関係なく位置の昇順で出力され、選択リストは追加した順のまま各項目に位置を表示します。
短縮形は animation: <名前> <継続時間>ms <タイミング関数> 0ms <繰り返し> both です。同じ位置のフレームを 2 つ持つこともでき、両方のブロックが出力され、同じパーセントの後のブロックが最後に並びます。
キーフレームを追加は最も広い間隔を分割し、中点を丸めます。初期の 3 個から順に 25、75、13、38、63% に入り、最終的な並びは 0、13、25、38、50、63、75、100% です。8 個で追加は無効になり、2 個で削除は「2 つ以上必要」と通知します。
範囲はフィールドを離れた時点で適用されます。位置 150 は 100、-50 は 0、不透明度 3 は 1、拡大率 5 は 4、translate 400px は 300px、rotate 900deg は 720deg として保存されます。空欄は直前の値に戻り、リスト・タイムライン・出力は常に保存値を運ぶため、150% のフレームが CSS パーサーに捨てられることはなくなりました。
フレームごとに動かせるのは transform と opacity だけです。フレーム単位の色・フィルター・背景、animation-delay、direction、fill、play-state の操作はなく、出力クラスは常に .animated-element です。処理はすべてページ内で完結し、コントロールを動かしてもネットワーク要求は発生しません。
イージングはメニューから選び、overshoot は単語ではなく cubic-bezier(0.34, 1.56, 0.64, 1) を出力します。タイムラインのドラッグ、GIF や動画の書き出し、比較用の 2 つ目の要素はありません。同じ位置の重複は許可され、両方のブロックが出力されます。