“CSS Animations”

概要

“CSS Animations”はCSSによるアニメーションについての仕様を定義している仕様書です。

アニメーションのキーフレームを定義する“@keyframes”ルールやアニメーションを要素に適用したり、アニメーションを制御する“animation”プロパティなどのプロパティが定義されています。

仕様書

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

animation-name
animation-duration
animation-timing-function
animation-iteration-count
animation-direction
animation-play-state
animation-delay
animation-fill-mode
animation

定義されている@ルール

@keyframes

アニメーションの適用

CSSのアニメーションは要素に適用されるスタイルを決定するカスケードにアニメーションのための宣言で指定された値を追加し、スタイルを上書きすることで適用されます。アニメーションによるスタイルはすべての通常(“!important”が付けられていない)の宣言よりも優先されますが、“!important”が付けられた宣言は上書きできません。

複数のアニメーションが同じプロパティの挙動について指定している場合には“animation-name”プロパティの値として記述順序が最も後に記述されているアニメーションが他のアニメーションによる指定を上書きします。

アニメーションはアニメーションが適用される前後に要素に適用されているスタイル・ルールの計算値には影響を与えません。また、アニメーションが適用された後も既定では“animation-delay”プロパティによって指定された遅延時間中はアニメーションによるスタイルは適用されません。ただし、“animation-fill-mode”プロパティによる指定で遅延時間中やアニメーションの終了後もアニメーションによるスタイルを適用することができます。

アニメーションの実行中はアニメーションに関係するプロパティの値はアニメーションによって算出されます。ただし、カスケードによって他の宣言の値が優先される場合があります。

アニメーションが適用されていてまだ終了していない時、もしくはすでに終了していて“animation-fill-mode”プロパティの値が“forwards”か“none”である場合、“will-change”プロパティにアニメーションに関係するプロパティがすべて含まれるかのように扱われます。

アニメーションは要素にアニメーションを適用するスタイル・ルールとそれに関連付けられる“@keyframes”ルールが両方解決されると開始します。アニメーションが適用されていても関連付けられる“@keyframes”ルールが見つからない場合にはアニメーションは開始されません。アニメーションはアニメーションを適用するスタイル・ルールを“:hover”擬似クラスやスクリプトなどで動的に追加することでも開始することができます。

アニメーションは開始するとアニメーションが終了するか“animation-name: none;”になるまで続きます。

アニメーションのためのスタイルが変更された場合にはアニメーションの途中だったとしても初めから変更後の値が指定されていたかのように扱われます。

“display”プロパティの値が“none”に変更された場合、実行中のアニメーションは子孫要素のものも含めてすべて終了されます。

“display”プロパティの値が“none”から“none”以外の値に変更された場合にはその要素と“display: none;”でない子孫要素のアニメーションを開始します。

ユーザー・エージェントは文書の出力先がインタラクティブでない場合、例えば紙に印刷される場合などにはアニメーションを無視することができます。

DOMイベント

アニメーションの開始と終了、繰り返されるアニメーションの一つの周期の終了、アニメーションの中止はDOMイベントを発生させます。“animation-name”プロパティによって複数のアニメーションが適用されている場合にはそのそれぞれがイベントを発生させます。

これらのイベントはアニメーションをスクリプトを使用して制御したり、アニメーションと同期したアクションを起こすために使用することができます。

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

“animationName”

イベントを発生させたアニメーションの“animation-name”プロパティの値。

“elapsedTime”

アニメーションが開始してからイベントが発生した時点までの経過時間の秒数。アニメーションが一時停止されていた時間は含みません。

“pseudoElement”

イベントを発生させたアニメーションが対象とするCSSの擬似要素の名前。擬似要素でなければ空文字列です。

“AnimationEvent()”

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

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

“animationstart”

アニメーションが開始した時に発生します。遅延時間がある場合は遅延時間が終わった時に発生します。

“animationend”

アニメーションが終了した時に発生します。

“animationiteration”

アニメーションの1回の周期が終了した時に発生します。このイベントは“animationend”が同時に発生する場合には発生せず、アニメーションが繰り返されない場合には一度も発生しません。

“animationcancel”

アニメーションが“animationend”が発生せずに終了された時に発生します。

イベントハンドラ

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

プロパティ

@ルール