CSS トランジション

CSS トランジション (CSS transition) モジュールは、異なる CSS プロパティ値の間でなだらか遷移を作成する機能を規定します。これらのトランジションの挙動は、イージング関数、持続時間、その他の値を指定することで制御できます。

通常、CSS プロパティの値が変更されると、古い値から新しい値への変化は即時に行われます。CSS トランジションモジュールは、プロパティの古い状態から新しい状態への変化を、指定された時間をかけて徐々に制御することを可能にします。同時に、トランジションが異なる段階に到達した際にコードを実行できるようにするイベントハンドラーも提供します。

場合によっては、遷移の起点となる "from" 値が存在しないことがあります。例えば、要素がDOMに追加される場合、定義されるスタイルは "to" 状態向けのものとなります。このモジュールは、そのようなケース向けに開始スタイルを定義可能にする @starting-style アットルールを提供します。同時に、離散的なプロパティ値のトランジション方法も定義します。例えば離散的にアニメーションする display プロパティを none 値から表示させる値へトランジションさせる場合などです。