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

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

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

リファレンス

プロパティ

• transition
• transition-behavior
• transition-delay
• transition-duration
• transition-property
• transition-timing-function

アットルール

• @starting-style

インターフェイス

• CSSStartingStyleRule
• CSSTransition
  • transitionProperty プロパティ
• TransitionEvent
  • TransitionEvent() コンストラクター
  • TransitionEvent.propertyName プロパティ
  • TransitionEvent.elapsedTime プロパティ
  • TransitionEvent.pseudoElement プロパティ
  • transitioncancel イベント
  • transitionend イベント
  • transitionrun イベント
  • transitionstart イベント

ガイド

CSS トランジションの使用

CSS を使ってスムーズな変化を作る方法についての、ステップバイステップのチュートリアルです。この記事では関連する各 CSS プロパティと、それらがどのように作用するかを解説します。

display のアニメーション

離散的にアニメーションするdisplay プロパティのnone 値へ、またはnone 値からのトランジション。

ポップオーバーのトランジションと<dialog> のトランジション

@starting-style から最終的な:popover-open および:open 擬似クラスのスタイルへトランジションする例です。

関連概念

• interpolate-size プロパティ

• calc-size() 関数

• 内在サイズ用語項目

• CSS イージング関数モジュール:

  • <easing-function> データ型

• CSS アニメーションモジュール:

  • animation 一括指定
  • animation-delay
  • animation-direction
  • animation-duration
  • animation-fill-mode
  • animation-iteration-count
  • animation-name
  • animation-play-state
  • animation-timing-function

• CSS 座標変換モジュール:

  • transform
  • transform-box
  • transform-origin
  • transform-style

• CSS スクロールスナップモジュール:

  • scroll-snap-type
  • scroll-padding
  • scroll-snap-align
  • scroll-margin
  • scroll-snap-stop

仕様書

関連情報

• opacity
• visibility
• ViewTransition インターフェイス
• PageTransitionEvent インターフェイス