CSS Transition Generator

CSS Transition Generator は、CSS transition プロパティのビジュアル エディタです。アニメーション化するプロパティを選択し、デュレーションを設定し、タイミング関数を選択し、遅延を追加します。その後、宣言をコピーする前に、ライブ プレビューをトリガーして正確な緩和を監視します。 1 つの速記でいくつかのトランジションをレイヤー化できます (たとえば、トランスフォームの移動中に不透明度をフェードします)。各レイヤーは独自のプロパティ、デュレーション、タイミング、遅延を取得します。

トランジションはブラウザに、プロパティの2 つの値の間の変更を即座に切り替えるのではなく、アニメーション化するように指示します。 change a background colour on hover with no transition and it snaps; add transition: background-color 200ms ease and the same change eases over a fifth of a second.トランジションはホバー状態ではなくベース状態に住んでいるので、要素は変更の内外両方にアニメーション化し、それがインタラクションが途中で突然ではなく終了したように感じさせるものです。

すべてはブラウザで行われます。 「フェード」、「ボタン ホバー」、「バウンス」などのプリセットから開始し、スライダーを調整して選択し、プレビュー トリガーを押してモーションを表示し、速記をコピーします。ツールは仕様に必要な 4 つの部分 (プロパティ、期間、タイミング関数、遅延) を順序で書き込み、ゼロになると遅延を省略します。アカウントもアップロードもせず、ページがロードされるとオフラインで動作し続けます。

最も一般的な間違いは、中間値のないプロパティを遷移させようとすることです。 display: none to display: block cannot animate, because display is not animatable property - there is no halfway between none and block - which is why a fade-in built on display alone jumps. display: display に組み込まれたフェードインがジャンプする修正点は、不透明度と可視性を一緒に遷移させるか、新しい allow-discrete 動作を使用することです。また、幅、高さ、上部、または左側に優先して変換と不透明度をアニメートする価値があります。最初の 2 つは GPU 上で合成され、レイアウトをトリガーしないため、スムーズに保ちますが、レイアウト プロパティをアニメートすると、すべてのフレームでページが再計算され、通常、ぎくしゃくしたどもりの遷移の原因となります。