“CSS Transitions”

概要

“CSS Transitions”はCSSの値が変更された時の遷移効果についての仕様を定義している仕様書です。

仕様書

定義されているプロパティ

transition-property
transition-duration
transition-timing-function
transition-delay
transition

遷移効果の適用

CSSのプロパティの値が変更されると、通常は要素の描画結果は元の値によるものから新しい値のものへ直ちに変更されます。しかし、“遷移効果(Transitions)”を適用することで指定された時間をかけて値の変更をスムーズにすることができます。

遷移効果はプロパティの値が変更された時にプロパティの計算値が時間をかけて変動することで表現されます。

要素に適用されているプロパティの計算値の変更は要素の文書への動的な挿入や除去による文書ツリーの変更、スタイルシートの変更などさまざまな要因によって起こります。ユーザー・エージェントがこのような計算値の変更を行ったり、新しく追加したプロパティの計算値を算出する場合にはすべての要素のすべてのプロパティの計算値を算出しなおさなければならず、この処理のことを“スタイル変更イベント(Style Change Event)”と言います。

スタイル変更イベントが発生した場合、スタイル変更イベントによって変更された計算値をもとに遷移効果が開始します。

要素がスタイル変更イベントが発生した時や前回のスタイル変更イベントが発生した時にまだ文書内になかった場合には遷移効果は開始されません。

“変更前スタイル(Before-change Style)”は前回のスタイル変更イベント以降に要素に適用されているすべてのプロパティの計算値です。ただし、アニメーションや遷移効果、SMILアニメーションによってスタイル変更イベントの時点まで更新されているスタイルは除かれます。

同様にして“変更後スタイル(After-change Style)”はスタイル変更イベントの時点で既知の情報をもとに算出されたすべてのプロパティの計算値です。ただし、アニメーション用のプロパティ(“animation-name”プロパティなど)の計算値は変更前スタイルのものを使用し、遷移効果のためのスタイルは除外し、祖先要素の変更後スタイルから継承されるスタイルも適用されます。

変更前スタイルと変更後スタイルを比較して、プロパティのアニメーション・タイプが“アニメーション不可”、もしくは“離散”でなければそのプロパティの値は“遷移可能(Transitionable )”で遷移効果が適用されます。

要素に適用されているプロパティの遷移効果が実行されている時、要素に適用されるスタイルを決定するカスケードに“現在値(Current value)”と呼ばれる値を追加します。現在値は同じ要素に適用される同じプロパティがアニメーションを実行していない場合にだけ追加されます。

遷移効果の開始前と開始時の現在値は遷移の開始値と同じです。次に、遷移効果の開始後の現在値は遷移の開始値と終了値、イージング関数から出力される遷移の進捗度をもとに補間した値になります。値がどのようにして補間されるかはプロパティのアニメーション・タイプによって定義されます。

DOMイベント

遷移効果の生成、開始、完了と中止はDOMイベントを発生させます。

これらのイベントはスクリプトによって遷移効果と同期したアクションを起こすために使用することができます。

“TransitionEvent”のプロパティとメソッド

“propertyName”

イベントを発生させた遷移効果に関連するプロパティ名です。プロパティ名は常に個別指定プロパティの名前です。

“elapsedTime”

移効果が開始してからイベントが発生した時点までの経過時間の秒数。遷移効果の遅延時間は含みません。

“pseudoElement”

イベントを発生させた遷移効果が対象とするCSSの擬似要素の名前。擬似要素でなければ空文字列です。

“TransitionEvent()”

イベント・コンストラクタです。

“TransitionEvent”のイベント・タイプ

“transitionrun”

遷移効果が生成され、遷移効果の遅延時間が開始した時に発生します。

“transitionstart”

遷移効果の遅延時間が終了し、実際に遷移効果が開始した時に発生します。

“transitionend”

遷移効果が終了した時に発生します。遷移効果が終了する前に中止された場合はこのイベントは発生しません。

“transitioncancel”

遷移効果が中止された時に発生します。

イベントハンドラ

以下のイベントハンドラはすべてのHTMLの要素でイベントハンドラ・コンテント属性とイベントハンドラIDL属性として使用できます。また、すべての“Document”オブジェクトと“Window”オブジェクトでイベントハンドラIDL属性として使用できます。

プロパティ