CSS トランジションジェネレーター（状態プレビュー付き）
何をどれだけ動かすかを選び、変化後の状態を記述して、プレビュー要素を切り替えながら 2 つのルールをコピーできます。
ブラウザ内でローカルに実行 · transition · timing-function · インタラクティブ状態
何をどれだけ動かすかを選び、変化後の状態を記述して、プレビュー要素を切り替えながら 2 つのルールをコピーできます。
ブラウザ内でローカルに実行このツールは 2 つのルールを書き出します。1 つは transition のショートハンド（プロパティ・時間・イージング・遅延）を持つ基本ルール、もう 1 つは要素が変化する先の transform・不透明度・背景色・フィルターを持つターゲットルールです。プレビュー要素を切り替えると、この 2 つが実際の DOM 要素に対して適用されます。
表示される値はそのまま書き出されます。数値は各フィールドに示された範囲に収められ、空にしたフィールドは 0 ではなく直前の有効な値に戻ります。計算はページ内で完結し、入力は送信されず、オフラインでも動作します。
1 つ目のルールが transition のショートハンド（どのプロパティを・どれだけ・どの曲線で・どの遅延で動かすか）を持ちます。2 つ目が変化後の状態（transform・不透明度・背景色・わずかな明るさと彩度のフィルター）を記述し、切り替えたときに適用されます。
アニメーションするのは transition に並べたプロパティだけです。リストが opacity なら、ターゲットルールの transform・色・フィルターは一度に切り替わります。all なら変化する値がまとめて動きます。プレビューも同じ挙動です。
セレクターには all・transform・opacity・background-color・filter があり、これはプレビュー要素が変える 5 つの項目そのものです。1 つに絞ると書き出すリストが短くなり、hover や focus の状態ではたいていそれが適切です。試している間は all が安全です。
プリセットはこの選択も読み込みます。Hover lift は all、Fade は opacity、Zoom と Soft spin は transform、Color swap は background-color をアニメーションします。ほかの項目も変化後の状態を記述しているので、プリセットを編集して必要な部分だけ残せます。
duration は 0〜5000 ms、delay は 0〜3000 ms で、どちらも整数ミリ秒に丸められます。イージングは CSS の 5 つのキーワードと 2 つの 3 次ベジェ曲線で、表示には書き出されるルールと同じ値が出ます。
数値はフィールドに示された範囲に収められるため、書き出したルールにブラウザーが無視したり別の意味で読んだりする値は入りません（たとえば負の時間は duration ではなく delay として解釈されます）。コピーしたルールは実際に動かす要素で確認してください。祖先の transform は、アニメーションする transform と合成されます。