CSSアニメーション レベル1

1. はじめに

このセクションは規定的ではありません

CSSトランジション [CSS3-TRANSITIONS] は、基礎となるプロパティの変化によってCSSプロパティ値が変化した際に、値を補間する方法を提供します。これにより簡単なアニメーションが容易に行えますが、アニメーションの開始状態と終了状態は既存のプロパティ値によって制御され、トランジションではアニメーションの進行方法について著者がほとんど制御できません。

この提案では、著者がCSSプロパティの時間的変化をキーフレームの集合として指定できる、定義済みアニメーションを導入します。アニメーションはトランジションと同様に、CSSプロパティの提示値を時間の経過とともに変化させます。主な違いは、トランジションがプロパティ値の変化時に暗黙的に発動するのに対し、アニメーションはアニメーションプロパティが適用されたときに明示的に実行されることです。したがって、アニメーションにはアニメーションされるプロパティの明示的な値が必要です。これらの値は以下で説明するアニメーションキーフレームを用いて指定します。

アニメーションの反復回数、開始値と終了値の交互挙動、アニメーションが実行中か一時停止中かなど、アニメーションの多くの側面を制御できます。アニメーションの開始時間を遅らせることもできます。

1.1. 値の定義

この仕様は、CSSプロパティ定義規約（[CSS2]）と 値定義構文（[CSS-VALUES-3]）に従っています。 この仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせによって、これらの値型の定義が拡張される場合があります。

各プロパティの定義に記載されたプロパティ固有の値に加えて、この仕様で定義されているすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。 可読性のため、これらのキーワードは明示的に繰り返し記載されていません。

2. アニメーション

CSSアニメーションは、算出プロパティ値に影響します。この効果は、CSSカスケード ([CSS3CASCADE]) に指定値を追加することで発生し（CSSアニメーション用のレベル）、アニメーションの現在の状態に合った算出値を生成します。[CSS3CASCADE] で定義されているように、アニメーションは通常のすべてのルールを上書きしますが、!importantルールには上書きされます。

ある時点で同じプロパティに対して複数のアニメーションが挙動を指定している場合、animation-name の値で最後に現れるアニメーションが、その時点で他のアニメーションを上書きします。

アニメーションは、アニメーションの適用前（つまり animation-name プロパティが要素に設定された時）や、削除された後には算出値に影響しません。さらに、通常はアニメーション遅延が終了する前やアニメーション終了後も算出値に影響しませんが、animation-fill-mode プロパティによっては影響する場合があります。

アニメーション実行中は、アニメーションするプロパティの値が算出されます。他の値は、CSSカスケード ([CSS3CASCADE]) に従って、アニメーション値より優先される場合があります。

アニメーションが適用されていて終了していない場合、あるいは終了していても animation-fill-mode が forwards や both の場合、ユーザーエージェントは、当該要素の will-change プロパティ ([css-will-change-1]) が、アニメーションによってアニメーションされたすべてのプロパティを追加で含んでいるかのように動作しなければなりません。

アニメーションの開始時刻は、アニメーションを適用するスタイルと対応する @keyframes ルールの両方が解決された時刻です。要素にアニメーションが指定されても対応する @keyframes ルールがまだ存在しない場合、アニメーションは開始できません。該当する @keyframes ルールが解決できるようになると、アニメーションは最初から開始します。要素のスタイルを動的に変更して指定されたアニメーションは、そのスタイルが解決されたときに開始します。これは、ホバーなどの疑似スタイルルールの場合は即座に、スクリプトでスタイルを適用した場合はスクリプトエンジンがブラウザに制御を戻した時に開始することがあります。なお、キーフレームスタイルルールを動的に更新しても、アニメーションが開始または再開始されることはありません。

要素にアニメーションを適用するには、その名前が animation-name プロパティの算出値の識別子のひとつとして現れ、アニメーションが有効な @keyframes ルールを使用している必要があります。アニメーションが開始すると、終了するか animation-name が削除されるまで継続します。アニメーションプロパティの値がアニメーション実行中に変更された場合、その変更はアニメーションが開始された時点からその値を持っていたかのように適用されます。たとえば、animation-delay を短縮すると、アニメーションが前方にジャンプしたり、即座に終了して animationend イベントが発行されたりすることがあります。 逆に、animation-delay を延長すると、アニメーションが再開始され、animationstart イベントが発行されることがあります。

同じ @keyframes ルール名は animation-name 内で繰り返して指定できます。 animation-name の値が更新されると、既存のアニメーションリストを末尾から先頭に向かって新しいアニメーションリストを順に反復し、それぞれのアニメーションについて、既存のアニメーションリスト内で最後に一致するアニメーションを探します。 一致が見つかった場合、既存のアニメーションは新しいリストの位置に対応するアニメーションプロパティで更新され、再生時間は上記のとおり維持されます。 一致したアニメーションは既存のリストから削除され、二重に一致しないようにします。 一致が見つからない場合は新しいアニメーションが作成されます。 その結果、animation-name を ‘a’ から ‘a, a’ に更新すると、既存の ‘a’ 用アニメーションはリストの2番目のアニメーションとなり、リストの最初の項目には新しいアニメーションが作成されます。

div {
  animation-name: diagonal-slide;
  animation-duration: 5s;
  animation-iteration-count: 10;
}

@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}

display プロパティを none に設定すると、その要素と子孫に適用されている実行中のアニメーションはすべて終了します。要素の display が none の場合、display を none 以外に更新すると、animation-name プロパティで適用されているすべてのアニメーションがその要素および display が none 以外の子孫要素に対して開始されます。

著者はアニメーションを使って動的に変化するコンテンツを作成できますが、動的に変化するコンテンツは一部のユーザーに発作を引き起こす可能性があります。発作の原因となる可能性があるコンテンツを回避する方法については、ガイドライン2.3：発作：発作の原因として知られている方法でコンテンツを設計しないこと（[WCAG20]）を参照してください。

レンダリングメディアが対話型でない場合（例：印刷時など）、実装はアニメーションを無視してもかまいません。将来のバージョンのこの仕様では、これらのメディア向けのアニメーションのレンダリング方法が定義されるかもしれません。

3. キーフレーム

キーフレームは、アニメーションの様々な時点でアニメーションされるプロパティの値を指定するために使用されます。キーフレームはアニメーションの1サイクルの挙動を指定し、アニメーションは0回以上繰り返される場合があります。

キーフレームは、以下のように定義される @keyframes アットルールを使用して指定します：

@keyframes = @keyframes <keyframes-name> { <rule-list> }

<keyframes-name> = <custom-ident> | <string>

<keyframe-block> = <keyframe-selector># { <declaration-list> }

<keyframe-selector> = from | to | <percentage [0,100]>

<rule-list> は、@keyframes 内で <keyframe-block> ルールのみを含むことができます。

<declaration-list> は、<keyframe-block> 内でこの仕様で定義されているプロパティ以外の任意のCSSプロパティを受け付けますが、例外的に animation-timing-function プロパティは受け付け、特別に解釈されます。 これらのプロパティはカスケードとは相互作用しません（そのため !important を使用すると無効となり、プロパティは無視されます）。

@keyframes ブロックには、前置部の <custom-ident> または <string> により名前が与えられます。 2つの構文は機能的に同等であり、名前はidentまたはstringの値です。 <custom-ident> や <string> の場合、名前は完全に大文字小文字を区別します。 2つの名前が等しいのは、コードポイント単位で同一の場合のみです。 <custom-ident> では、さらに none キーワードを除外します。

@keyframes foo { /* ... */ }
@keyframes "foo" { /* ... */ }

@keyframes FOO { /* ... */ }

@keyframes initial { /* ... */ }
@keyframes None { /* ... */ }

@keyframes "initial" { /* ... */ }
@keyframes "None" { /* ... */ }

<keyframe-selector> は、<keyframe-block> のために、カンマ区切りのパーセンテージ値またはキーワード from、to で構成されます。セレクタはアニメーションの継続時間に対するパーセンテージを指定するために使用されます。 キーフレーム自体は、セレクタで宣言されたプロパティ値のブロックによって指定されます。キーワード from は値 0% と同等です。キーワード to は値 100% と同等です。 0% 未満や 100% より大きい値は無効となり、その <keyframe-block> は無視されます。

パーセンテージ値には単位指定子（%）が必要であることに注意してください。したがって、0 は無効なキーフレームセレクタです。

0% や from キーフレームが指定されていない場合、ユーザーエージェントはアニメーションされるプロパティの算出値を使って 0% キーフレームを構築します。100% や to キーフレームが指定されていない場合も、ユーザーエージェントはアニメーションされるプロパティの算出値を使って 100% キーフレームを構築します。

<keyframe-block> にはプロパティと値が含まれます。この仕様で定義されているプロパティは、animation-timing-function を除き、これらのルールでは無視されます。その挙動は後述します。また、!importantが付加されたプロパティは無効で無視されます。

同じ名前で複数の @keyframes ルールが定義されている場合、文書順で最後のものが有効となり、それ以前のものはすべて無視されます。

div {
  animation-name: slide-right;
  animation-duration: 2s;
}

@keyframes slide-right {

  from {
    margin-left: 0px;
  }

  50% {
    margin-left: 110px;
    opacity: 1;
  }

  50% {
    opacity: 0.9;
  }

  to {
    margin-left: 200px;
  }

}

@keyframes slide-right {

  from {
    margin-left: 0px;
  }

  50% {
    margin-left: 110px;
    opacity: 0.9;
  }

  to {
    margin-left: 200px;
  }

}

キーフレームの集合を決定するには、セレクタ内のすべての値を時間順に昇順でソートします。@keyframes ルール内の規則はカスケードされるため、同じセレクタ値を持つ @keyframes ルールが複数ある場合、キーフレームのプロパティは複数のルールから派生することがあります。

キーフレームでプロパティが指定されていない場合や無効の場合、そのキーフレームは存在しないものとしてアニメーションが進行します。概念的には、いずれかのキーフレームに存在する各プロパティごとにキーフレーム集合が構築され、それぞれ独立してアニメーションが実行されるかのように動作します。

@keyframes wobble {
  0% {
    left: 100px;
  }

  40% {
    left: 150px;
  }

  60% {
    left: 75px;
  }

  100% {
    left: 100px;
  }
}

「wobble」という名前のアニメーションには4つのキーフレームが指定されています。最初のキーフレーム（アニメーションサイクルの開始時）では、アニメーションされる left プロパティの値は 100px です。アニメーションの40%時点で left は 150px までアニメーションされます。 60%時点では left が 75px まで戻り、アニメーションサイクルの最後では left の値は 100px に戻ります。下図は、アニメーションの継続時間が 10s である場合の状態を示しています。

本仕様は、CSSトランジションの Application of transitions セクションのように、値がキーフレームからどのように決定されるかを定義する必要があります。

3.1. キーフレームのタイミング関数

キーフレームスタイルルールでは、アニメーションが次のキーフレームへ進む際に使用されるタイミング関数も宣言できます。

@keyframes bounce {

  from {
    top: 100px;
    animation-timing-function: ease-out;
  }

  25% {
    top: 50px;
    animation-timing-function: ease-in;
  }

  50% {
    top: 100px;
    animation-timing-function: ease-out;
  }

  75% {
    top: 75px;
    animation-timing-function: ease-in;
  }

  to {
    top: 100px;
  }

}

to や 100% のキーフレームで指定されたタイミング関数は無視されます。

詳細は animation-timing-function プロパティの項を参照してください。

3.2. animation-name プロパティ

animation-name プロパティは適用するアニメーションのリストを定義します。各名前は、アニメーションのプロパティ値を提供するキーフレームアットルールを選択するために使用されます。名前がいずれのキーフレームアットルールとも一致しない場合、アニメーションされるプロパティはなく、アニメーションは実行されません。また、アニメーション名が none の場合、アニメーションはありません。これはカスケードからくるアニメーションを上書きするために使用できます。複数のアニメーションが同じプロパティを変更しようとした場合、名前リストの末尾に最も近いアニメーションが優先されます。

名前で列挙された各アニメーションには、下記の他のアニメーションプロパティにも対応する値があるべきです。その他のアニメーションプロパティの値リストの長さが一致しない場合、animation-name リストの長さが、アニメーション開始時に各リストで調べられる項目数を決定します。リストは先頭から対応付けられ、末尾の余剰値は使用されません。他のプロパティに animation-name の値数に十分なカンマ区切り値がない場合、UAは値リストを繰り返して十分な数になるように使用値を計算しなければなりません。この切り捨てや繰り返しは算出値には影響しません。

注: これは background-* プロパティの挙動と類似しており、background-image は animation-name と類似しています。

animation-name の値には以下の意味があります：

none

キーフレームが全く指定されていないため、アニメーションはありません。 他のアニメーションプロパティを指定しても、このアニメーションには効果がありません。

<keyframes-name>

アニメーションは、指定された <keyframes-name> の名前を持つキーフレームを使用します（存在する場合）。 その名前の @keyframes ルールが存在しない場合、アニメーションはありません。

3.3. animation-duration プロパティ

animation-duration プロパティは、1回のアニメーションサイクルの継続時間を定義します。

<time [0s,∞]>

<time> は、アニメーションが1サイクルを完了するまでの時間を指定します。 負の <time> は無効です。

<time> が 0s の場合（初期値と同様）、キーフレームは効果を持ちませんが、アニメーション自体は即座に発生します。 具体的には、開始・終了イベントが発火します。 animation-fill-mode が backwards または both の場合、 animation-direction で定義されるアニメーションの最初のフレームが animation-delay の間表示されます。 animation-delay の後、 animation-direction で定義されるアニメーションの最後のフレームが animation-fill-mode が forwards または both の場合表示されます。 animation-fill-mode が none の場合は、アニメーションは可視効果を持ちません。

3.4. animation-timing-function プロパティ

animation-timing-function プロパティは、 アニメーションが各キーフレーム間をどのように進行するかを記述します。 タイミング関数は CSS イージング関数モジュール [css-easing-1] で定義されています。

使用される input progress value は、現在のキーフレームから次のキーフレームまでの経過時間の割合（animation-direction の効果を組み込んだ後）です。

animation-delay の間は animation-timing-function は適用されません。

注: この定義は、step easing function の step position が start の場合、関数の最初のステップのトップと同じ逆方向のフィルを生み出してしまうため必要です。

output progress value は、 現在と次のキーフレーム間でプロパティ値を補間する際の p 値として使用されます。

キーフレームで指定された場合、animation-timing-function は、 アニメーションするプロパティについて、現在のキーフレームからソートされたキーフレームセレクタ順（暗黙の100%キーフレームも含む）の次のキーフレームまでの進行を定義します。

3.5. animation-iteration-count プロパティ

animation-iteration-count プロパティは、 アニメーションサイクルが再生される回数を指定します。初期値は 1 で、アニメーションは開始から終了まで1回だけ再生されます。 このプロパティは、animation-direction の値 alternate と組み合わせてよく使われ、これによりアニメーションは交互に逆方向で再生されます。

アニメーションがアクティブな時間枠（duration × iteration-count）は active duration と呼ばれます。

<single-animation-iteration-count> = infinite | <number [0,∞]>

infinite

アニメーションは無限に繰り返されます。

<number [0,∞]>

アニメーションは指定した回数だけ繰り返されます。 数値が整数でない場合、アニメーションは最後のサイクルの途中で終了します。 負の値は無効です。

0 は有効な値であり、animation-duration が 0s の場合と同様、アニメーションは即座に発生します。

アニメーションの継続時間が 0s の場合、animation-iteration-count のどんな有効値（infinite を含む）でも即座にアニメーションが発生します。

3.6. animation-direction プロパティ

animation-direction プロパティは、アニメーションが一部または全部のサイクルで逆方向に再生されるかどうかを定義します。 アニメーションが逆方向に再生される場合、タイミング関数も逆転します。 例えば、逆方向で再生された ease-in アニメーションは ease-out アニメーションのように見えます。

<single-animation-direction> = normal | reverse | alternate | alternate-reverse

normal

アニメーションのすべての反復は指定された通りに再生されます。

reverse

アニメーションのすべての反復は指定された方法と逆方向に再生されます。

alternate

アニメーションサイクルの奇数回は通常方向で、偶数回は逆方向で再生されます。

alternate-reverse

アニメーションサイクルの奇数回は逆方向で、偶数回は通常方向で再生されます。

注: 反復回数が奇数か偶数かを判定する際は、1からカウントを開始します。

3.7. animation-play-state プロパティ

animation-play-state プロパティは、アニメーションが実行中か一時停止中かを定義します。

<single-animation-play-state> = running | paused

running

このプロパティが running に設定されている間、 アニメーションは通常通り進行します。

paused

このプロパティが paused に設定されている間、 アニメーションは一時停止されます。 アニメーションは、一時停止前に進行した状態で要素に引き続き適用されます。 再び running に戻すと、元の進行位置から再開されます。 これは、アニメーションを制御する「時計」が停止して再び動き始めるような動作です。

アニメーションの遅延フェーズ中にこのプロパティが paused に設定された場合、 遅延の時計も一時停止され、animation-play-state が running に戻されるとすぐに再開します。

3.8. animation-delay プロパティ

animation-delay プロパティは、アニメーションがいつ開始されるかを定義します。このプロパティにより、アニメーションを適用してから実行開始まで時間を遅らせたり、適用前にすでに実行されているかのような見せ方も可能です。

<time>

<time> は、アニメーションの開始（これらのプロパティで要素にアニメーションが適用された時）から実際に実行が始まるまでの遅延時間を定義します。 0s（初期値）の遅延はアニメーションが適用されるとすぐに実行されることを意味します。

負の遅延も有効です。 0s の遅延と同様に、アニメーションは即座に実行されますが、自動的に絶対値の分だけ進行した状態で開始されます。 つまり、アニメーションが過去に指定された時間だけ前から始まっていたかのように見え、active duration の途中から開始する形となります。 アニメーションのキーフレームに暗黙の開始値がある場合は、値はアニメーション開始時のものが使われ、過去の値は使われません。

3.9. animation-fill-mode プロパティ

animation-fill-mode プロパティは、アニメーションが実行されていない時間帯にどんな値が適用されるかを定義します。デフォルトでは、アニメーションは適用された瞬間（animation-name プロパティが要素に設定された時）から実行開始（animation-delay で決まる）までの間、プロパティ値に影響しません。また、アニメーション終了後（animation-duration と animation-iteration-count で決まる）も影響しません。 animation-fill-mode プロパティでこの挙動を上書きできます。プロパティへの動的な更新は、アニメーション遅延中や終了後も必要に応じて反映されます。

<single-animation-fill-mode> = none | forwards | backwards | both

none

アニメーションが適用されているが実行されていない間は、何の効果もありません。

forwards

アニメーション終了後（animation-iteration-count で決まる）、アニメーションはアニメーション終了時点のプロパティ値を適用します。animation-iteration-count が0より大きい整数の場合、適用される値はアニメーションの最後に完了した反復の終了時点の値です（次の反復の開始時点の値ではありません）。animation-iteration-count が0の場合、適用される値は最初の反復を開始する値（animation-fill-mode が backwards の場合と同様）になります。

backwards

animation-delay で定義される期間中、アニメーションはアニメーションの最初の反復を開始するキーフレームで定義されたプロパティ値を適用します。 これらは from キーフレームの値（animation-direction が normal や alternate の場合）、または to キーフレームの値（animation-direction が reverse や alternate-reverse の場合）です。

both

forwards と backwards の両方の効果が適用されます。

3.10. animation ショートハンドプロパティ

animation ショートハンドプロパティは、カンマ区切りのアニメーション定義リストです。リスト内の各項目は、ショートハンドのすべてのサブプロパティ（アニメーションプロパティと呼ばれる）の値を1つずつ割り当てます。（animation-name の定義を参照。これらのプロパティが異なる長さのリストを持つ場合に何が起こるか、ただし animation ショートハンドのみで定義した場合はこの問題は発生しません。）

<single-animation> = <time> || <easing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state> || [ none | <keyframes-name> ]

それぞれのアニメーション定義内では、順序が重要です。各 <single-animation> 内で最初に <time> として解析できる値が animation-duration に割り当てられ、 2番目の <single-animation> 内で <time> として解析できる値が animation-delay に割り当てられます。

それぞれのアニメーション定義内では、<keyframes-name> の値を他のキーワードと区別するためにも順序が重要です。解析時、他のプロパティ用のキーワードで、ショートハンド内で前に値が見つかっていないものは animation-name でなくそのプロパティの値として受け入れる必要があります。また、シリアライズ時は、他のプロパティのデフォルト値を、animation-name が他のプロパティ値となり得る場合など、必要最小限のケースで出力しなければならず、追加で出力しても構いません。

4. アニメーションイベント

複数のアニメーション関連イベントがDOMイベントシステムを通じて利用可能です。アニメーションの開始・終了、および各反復の終了でDOMイベントが発生します。 要素は複数のプロパティを同時にアニメーションさせることができます。これは、単一の animation-name の値で複数プロパティを含むキーフレームを持つ場合や、複数の animation-name の値がある場合に発生します。イベントの観点では、各 animation-name が1つのアニメーションを指定します。したがって、各 animation-name の値ごとにイベントが発生し、アニメーションされているプロパティごとではありません。

有効なキーフレームルールが定義されているアニメーションはすべて実行され、イベントを生成します。これは空のキーフレームルールでも同様です。

アニメーションが実行された時間は、生成された各イベントと共に送信されます。これにより、イベントハンドラはループアニメーションの現在の反復や交互アニメーションの現在位置を判定できます。この時間には、アニメーションが paused 状態であった時間は含まれません。

4.1. AnimationEvent インターフェース

AnimationEvent インターフェースは、アニメーションイベントに関連する特定のコンテキスト情報を提供します。

4.1.1. IDL定義

[Exposed=Window]
interface AnimationEvent : Event {
  constructor(CSSOMString type, optional AnimationEventInit animationEventInitDict = {});
  readonly attribute CSSOMString animationName;
  readonly attribute double elapsedTime;
  readonly attribute CSSOMString pseudoElement;
};
dictionary AnimationEventInit : EventInit {
  CSSOMString animationName = "";
  double elapsedTime = 0.0;
  CSSOMString pseudoElement = "";
};

4.1.2. 属性

animationName, 型 CSSOMString, 読み取り専用

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

elapsedTime, 型 double, 読み取り専用

このイベントが発生した時点でアニメーションが実行されていた時間（秒）。一時停止していた時間は除外されます。具体的な計算方法は各イベントタイプごとに定義されています。

pseudoElement, 型 CSSOMString, 読み取り専用

アニメーションが実行されたCSS疑似要素の名前（「::」で始まる）。その場合、イベントのターゲットは疑似要素に対応する要素になります。アニメーションが要素自体で実行されている場合は空文字列となり、イベントのターゲットはその要素になります。

AnimationEvent(type, animationEventInitDict) は イベントコンストラクターです。

4.2. AnimationEvent の種類

発生しうるアニメーションイベントの種類は以下のとおりです：

animationstart

animationstart イベントはアニメーションの開始時に発生します。 animation-delay がある場合、遅延期間が終了した時点でこのイベントが発火します。

負の遅延の場合、イベントは elapsedTime が遅延の絶対値（アニメーションの active duration で上限）と等しい値で発火します。 すなわち、 min(max(-animation-delay, 0), active duration); この場合、animation-play-state が running でも paused でもイベントは発火します。

• バブル: あり
• キャンセル可: なし
• コンテキスト情報: animationName, elapsedTime, pseudoElement

animationend

animationend イベントはアニメーションが終了したときに発生します。 この場合、イベントの elapsedTime の値は active duration と等しくなります。

• バブル: あり
• キャンセル可: なし
• コンテキスト情報: animationName, elapsedTime, pseudoElement

animationiteration

animationiteration イベントは、アニメーションの各反復の終了時に発生します（ただし同時に animationend が発火する場合は除く）。 つまり、反復回数が1回以下のアニメーションではこのイベントは発生しません。

この場合の elapsedTime の値は、current iteration × animation-duration となります。 current iteration は新しい反復のゼロ基準インデックスです。例として、負の animation-delay がない場合、1回反復が完了した後の current iteration は1です。

• バブル: あり
• キャンセル可: なし
• コンテキスト情報: animationName, elapsedTime, pseudoElement

animationcancel

animationcancel イベントは、animationend イベントが発火しない方法でアニメーションの実行が停止した場合に発生します。 例：animation-name の変更によるアニメーションの削除や、アニメーション要素またはその先祖が display:none になる場合などです。

このイベントの elapsedTime の値は、アニメーション開始からキャンセルされた瞬間までに経過した秒数です（アニメーションが paused だった時間は除く）。 負の animation-delay があった場合、アニメーション開始は実際のトリガーより animation-delay 秒前とみなされます。 一方、正の animation-delay があり、遅延期間終了前にイベントが発火した場合、elapsedTime の値は0になります。

• バブル: あり
• キャンセル可: なし
• コンテキスト情報: animationName, elapsedTime, pseudoElement

4.3. 要素・Documentオブジェクト・Windowオブジェクトのイベントハンドラ

以下は、すべての HTML要素が イベントハンドラ内容属性および イベントハンドラIDL属性としてサポートしなければならないイベントハンドラ（および対応する イベントハンドライベントタイプ）です。また、すべての Document および Window オブジェクトが イベントハンドラIDL属性としてサポートしなければなりません：

5. DOMインターフェース

CSSアニメーションは、キーフレームを記述する新しいインターフェースペアによってCSSOMから利用可能になります。

注: 以下で定義されるインターフェースは、この仕様レベルで相互運用可能なAPIを反映しています。将来のレベルでは、このAPIの一部が廃止されたり拡張されたりする場合があります。

5.1. CSSRule インターフェース

以下の2つのルール型が CSSRule インターフェースに追加されます。これらは新しい keyframe および keyframes ルールの識別を提供します。

5.1.1. IDL定義

partial interface CSSRule {
    const unsigned short KEYFRAMES_RULE = 7;
    const unsigned short KEYFRAME_RULE = 8;
};

5.2. CSSKeyframeRule インターフェース

CSSKeyframeRule インターフェースは、単一のキーに対するスタイルルールを表します。

5.2.1. IDL定義

[Exposed=Window]
interface CSSKeyframeRule : CSSRule {
  attribute CSSOMString keyText;
  [SameObject, PutForwards=cssText] readonly attribute CSSStyleDeclaration style;
};

5.2.2. 属性

keyText, 型 CSSOMString

この属性は、パーセンテージ値のカンマ区切りリストとしてキーフレームセレクタを表します。from および to キーワードは、それぞれ 0% と 100% に対応します。

keyText に無効なキーフレームセレクタで更新を試みた場合、SyntaxError 例外をスローし、keyText の値は変更されません。

style, 型 CSSStyleDeclaration、読み取り専用

この属性は、キーフレームルール用の CSSStyleDeclaration オブジェクトを返します。詳細は以下の通りです：

readonlyフラグ

未設定。

宣言

ルール内で宣言された宣言（指定順）。

親CSSルール

コンテキストオブジェクト（つまりこの CSSKeyframeRule）。

オーナーノード

null。

5.3. CSSKeyframesRule インターフェース

CSSKeyframesRule インターフェースは、単一アニメーションのキーフレーム集合全体を表します。

5.3.1. IDL定義

[Exposed=Window]
interface CSSKeyframesRule : CSSRule {
           attribute CSSOMString name;
  readonly attribute CSSRuleList cssRules;
  readonly attribute unsigned long length;

  getter CSSKeyframeRule (unsigned long index);
  undefined        appendRule(CSSOMString rule);
  undefined        deleteRule(CSSOMString select);
  CSSKeyframeRule? findRule(CSSOMString select);
};

5.3.2. 属性

name, 型 CSSOMString

この属性はキーフレームの名前であり、animation-name プロパティで使用されます。

cssRules, 型 CSSRuleList、読み取り専用

この属性はリスト内のキーフレームへのアクセスを提供します。

length, 型 unsigned long、読み取り専用

この属性はリスト内のキーフレーム数です。

5.3.3. インデックス付きプロパティgetter

indexed property getter は、指定した位置の CSSKeyframeRule をキーフレームリストから返します。

パラメーター:

index 型 unsigned long

返すルールのゼロ基準インデックス。

戻り値:

CSSKeyframeRule

該当するルール、または指定したインデックスにルールがなければ undefined

例外なし

5.3.4. appendRule メソッド

appendRule メソッドは、渡された CSSKeyframeRule をキーフレームルールの末尾に追加します。

パラメーター:

rule 型 CSSOMString

追加されるルール。@keyframes ルール内の1エントリと同じ構文で表現されます。有効なルールは、キーが既に存在していても常に追加されます。

戻り値なし

例外なし

5.3.5. deleteRule メソッド

deleteRule メソッドは、指定されたキーフレームセレクタに一致する最後に宣言された CSSKeyframeRule を削除します。 一致するルールが存在しない場合、このメソッドは何もしません。

パラメーター:

select 型 CSSOMString

削除対象のルールのキーフレームセレクタ。0%〜100%のパーセンテージ値のカンマ区切りリスト、または from や to キーワード（それぞれ0%と100%に解決されます）。

指定したキーフレームセレクタの値の個数と順序は、対象となるキーフレームルールと一致しなければなりません。リスト内の値の前後の空白には敏感ではありません。

戻り値なし

例外なし

5.3.6. findRule メソッド

findRule メソッドは、指定したキーフレームセレクタに一致する最後に宣言された CSSKeyframeRule を返します。 一致するルールが存在しない場合、このメソッドは何も返しません。

パラメーター:

select 型 CSSOMString

検索対象のキーフレームセレクタ。0%〜100%のパーセンテージ値のカンマ区切りリスト、または from や to キーワード（それぞれ0%と100%に解決されます）。

指定したキーフレームセレクタの値の個数と順序は、対象となるキーフレームルールと一致しなければなりません。リスト内の値の前後の空白には敏感ではありません。

戻り値:

CSSKeyframeRule

見つかったルール。

例外なし

@keyframes colorful-diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  10% {
    background-color: blue;
  }

  10% {
    background-color: green;
  }

  25%, 75% {
    background-color: red;
  }

  100% {
    left: 100px;
    top: 100px;
  }

}

anim.deleteRule('10%');
var tenPercent = anim.findRule('10%');

var red = anim.findRule('75%');

var red = anim.findRule('25%,75%');

var from = anim.findRule('0%'); // Returns from { left: 0; top: 0; } rule
var to = anim.findRule('to');   // Returns 100% { left: 100px; top: 100px; } rule

5.4. GlobalEventHandlers インターフェースミックスインへの拡張

この仕様はHTMLの GlobalEventHandlers インターフェースミックスインを拡張し、イベントハンドラIDL属性を アニメーションイベント用に追加します。詳細は § 4.3 要素・Documentオブジェクト・Windowオブジェクトのイベントハンドラ を参照してください。

5.4.1. IDL定義

partial interface mixin GlobalEventHandlers {
  attribute EventHandler onanimationstart;
  attribute EventHandler onanimationiteration;
  attribute EventHandler onanimationend;
  attribute EventHandler onanimationcancel;
};

6. プライバシーに関する考慮事項

本仕様について報告されたプライバシー上の懸念はありません。

7. セキュリティに関する考慮事項

本仕様について報告されたセキュリティ上の懸念はありません。

8. 変更点

8.1. 2018年10月11日作業草案以降の変更点

以下の実質的な変更が行われました：

• CSSKeyframesRule のインデックス付きプロパティgetterを定義
• AnimationEvent定義にconstructor型を追加
• 範囲表記の寸法に単位必須を追加
• 記述子やルールの前置値に範囲定義表記を適用
• プロパティ値に範囲定義表記を適用
• イベント定義をその EventHandler コンテナと関連付け
• 生成規則のマークアップを改善
• タイポ修正（見つけるべきルール、削除すべきルールではない）
• 値定義参照を他のCSS仕様と一貫性を持たせた
• IDLをWeb IDL仕様に合わせた
• constructorにデフォルト辞書値を追加
• 分かりづらい例を改訂（#4118）
• ゼロ継続時間アニメーションの扱いを明確化
• 「none」ではなく「not animatable」を使用
• タイミング関数をイージング関数と呼ぶように
• GlobalEventHandlers を mixin に変更

9. 謝辞

特に Tab Atkins、Brian Birtles、Shane Stephens、Carine Bournez、Christian Budde、Anne van Kesteren、Øyvind Stenhaug、Estelle Weyl、そしてwww-styleコミュニティの皆様のフィードバックに感謝します。

10. その他の未解決課題

キーフレームの相互作用方法を仕様化する必要があります。

11. 編集中の作業グループ決議

このセクションは参考情報であり一時的なものです。

編集者は現在この仕様の編集が遅れています。以下の作業グループ決議がまだ編集に反映されていません：

• 2014-09-09 議事録 (Antibes f2f)
  • Issue(7335): キーフレーム値がどのように計算されるか、いつ計算されるかを詳細化; dbaronのメールのG.beta を使用
  • トランジションとアニメーションの両方ですべてのプロパティをアニメーションすることに合意。css-transitionsは相互運用不可/離散値のアニメーションを定義する。タイミング関数進行が50%未満の時は開始値、50%以上の時は終了値を取る
  • アニメーションプロパティ/キーフレームの動的変更。Tabが決議案を提案予定。 (Bug 14713)
  • 負のanimation-delay値はアニメーションのactive duration (animation-duration*animation-iteration-count) に適用される。そのため、反復が飲み込まれ、その分の反復イベントは発火しない。開始・終了イベントは発火する。delay == (-1*active_duration)でも同様
  • animation-durationがゼロのときもアニメーションの開始・終了イベントを発火し、elapsedTimeは0
  • animation-iteration-countがinfiniteでdurationが0なら、反復回数を有限とみなし0秒で実行（BrianのメールのOption A）
  • 負のanimation delayで最初にpause状態のアニメーションもstartイベントは発火する
• 2012-10-29 議事録
  • アニメーションプロパティを動的に変更可能に
  • @keyframesを動的に変更可能に
  • 重複するアニメーション名があった場合、最後に現れたものが有効
  • *animations*は*すべて*のプロパティをアニメーションする。特に指定がない限り、離散プロパティはタイミング関数進行が50%未満の時に開始値、50%以上の時に終了値を取る。
• 2012-12-12 議事録と中間コメント および2012-12-19議事録
  • アニメーションは少なくとも1つ有効なキーフレームルールを含む場合のみ実行される (Bug)
  • 要素がdisplay:noneからdisplay:非noneになった場合、アニメーションが即座に開始される (Bug)
  • 最初からpause状態のアニメーションも開始され（startイベント等が発火）、(Bug)
  • アニメーションは遅延フェーズ中でもpause可能。unpause後に残りの遅延が適用される (Bug)
  • animation-play-stateは他のアニメーションプロパティ同様リスト挙動（animation-nameの長さと一致）(Bug)
• 2013-02-20 議事録
  • Øyvindの明確化を採用
  • キーフレームルールはカスケードされる
  • pseudoElementのat-risk指定
• 2013-05-30 議事録
  • 非対話型メディアでのアニメーションの期待値
• 2014-01-27 議事録
  • 文書ロード待ちに関する記述を削除