CSS Animations Level 1

https://www.w3.org/TR/css-animations-1/
Admin
CSS Animations Level 1 allows authors to animate the values of CSS properties over time using...
Tokens:16,815
Snippets:114
Trust Score:10
Update:1 week ago
Show doc for...
Tokens:
Raw
### Animation with duplicate 50% keyframes

Source: https://www.w3.org/TR/css-animations-1

Example showing an animation applied to a div and a @keyframes rule with two 50% keyframes. The two 50% rules can be combined into an equivalent single rule, as illustrated in the next example.

```css
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;
  }

}

```

--------------------------------

### animationstart

Source: https://www.w3.org/TR/css-animations-1

The animationstart event fires at the start of an animation, after any delay period. It provides information about the animation name, elapsed time, and pseudo-element.

```APIDOC
## [Event] animationstart

### Description
The `animationstart` event occurs at the start of the animation. If there is an `animation-delay`, this event will fire once the delay period has expired. A negative delay will cause the event to fire with an `elapsedTime` equal to the absolute value of the delay capped to the active duration of the animation.

### Event Type
`animationstart`

### Bubbles
Yes

### Cancelable
No

### Context Info
- `animationName` (CSSOMString) - The value of the `animation-name` property of the animation that fired the event.
- `elapsedTime` (double) - The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused.
- `pseudoElement` (CSSOMString) - The name (beginning with two colons) of the CSS pseudo-element on which the animation runs, or the empty string if the animation runs on an element.

### Event Constructor
`AnimationEvent(type, animationEventInitDict)`
```

--------------------------------

### @keyframes colorful-diagonal-slide example

Source: https://www.w3.org/TR/css-animations-1

Example @keyframes rule used to illustrate the behavior of deleteRule and findRule. It contains duplicate 10% keyframes (blue then green) and a combined 25%, 75% selector for the red background rule.

```css
@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;
  }

}

```

--------------------------------

### @keyframes wobble with left property

Source: https://www.w3.org/TR/css-animations-1

Example @keyframes rule named wobble with keyframes at 0%, 40%, 60%, and 100% for the left property. If a property is not specified for a keyframe, the animation proceeds as if that keyframe did not exist.

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

  40% {
    left: 150px;
  }

  60% {
    left: 75px;
  }

  100% {
    left: 100px;
  }
}

```

--------------------------------

### Combined 50% keyframes for slide-right

Source: https://www.w3.org/TR/css-animations-1

Equivalent single @keyframes rule combining the two 50% keyframes from the previous example into one 50% block with both margin-left and opacity.

```css
@keyframes slide-right {

  from {
    margin-left: 0px;
  }

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

  to {
    margin-left: 200px;
  }

}

```

--------------------------------

### CSSKeyframeRule.keyText

Source: https://www.w3.org/TR/css-animations-1

Attribute to get or set the key selector text of a CSSKeyframeRule.

```APIDOC
## [Attribute] keyText

### Description
Gets or sets the key selector text of the keyframe rule.

### Method
Attribute

### Endpoint
CSSKeyframeRule.keyText

### Parameters
#### Attribute Value
- **keyText** (CSSOMString) - Required - The key selector text.

### Request Example
```js
rule.keyText = 'from';
```

### Response
#### Success Response
Returns the current keyText value.

#### Response Example
```js
const text = rule.keyText; // 'from'
```
```

--------------------------------

### CSSKeyframesRule.name

Source: https://www.w3.org/TR/css-animations-1

Attribute to get or set the name of a CSSKeyframesRule.

```APIDOC
## [Attribute] name

### Description
Gets or sets the name of the keyframes rule.

### Method
Attribute

### Endpoint
CSSKeyframesRule.name

### Parameters
#### Attribute Value
- **name** (CSSOMString) - Required - The name of the keyframes rule.

### Request Example
```js
rule.name = 'slide';
```

### Response
#### Success Response
Returns the current name value.

#### Response Example
```js
const name = rule.name; // 'slide'
```
```

--------------------------------

### GlobalEventHandlers.onanimationstart

Source: https://www.w3.org/TR/css-animations-1

Event handler for the animationstart event.

```APIDOC
## [Event Handler] onanimationstart

### Description
Event handler for the animationstart event.

### Method
Event Handler

### Endpoint
GlobalEventHandlers.onanimationstart

### Parameters
#### Attribute Value
- **onanimationstart** (EventHandler) - Required - The event handler.

### Request Example
```js
element.onanimationstart = function(event) { console.log('start'); };
```

### Response
#### Success Response
Returns the assigned event handler.

#### Response Example
```js
function(event) { console.log('start'); }
```
```

--------------------------------

### onanimationstart

Source: https://www.w3.org/TR/css-animations-1

The onanimationstart event handler is supported on HTML elements, Document, and Window objects. It corresponds to the animationstart event.

```APIDOC
## [Event Handler] onanimationstart

### Description
The `onanimationstart` event handler must be supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and by all `Document` and `Window` objects, as event handler IDL attributes.

### Event Handler Event Type
`animationstart`
```

--------------------------------

### AnimationEventInit dictionary

Source: https://www.w3.org/TR/css-animations-1

Dictionary for initializing AnimationEvent objects.

```APIDOC
## [Dictionary] AnimationEventInit

### Description
Dictionary used to initialize AnimationEvent objects.

### Method
Dictionary

### Endpoint
AnimationEventInit

### Parameters
#### Dictionary Members
- **animationName** (CSSOMString) - Optional - Default "" - The animation name.
- **elapsedTime** (double) - Optional - Default 0.0 - The elapsed time.
- **pseudoElement** (CSSOMString) - Optional - Default "" - The pseudo-element name.

### Request Example
```js
const init = { animationName: 'slide', elapsedTime: 0.5, pseudoElement: '::before' };
```

### Response
#### Success Response
Returns an AnimationEventInit dictionary.

#### Response Example
```js
{ animationName: 'slide', elapsedTime: 0.5, pseudoElement: '::before' }
```
```

--------------------------------

### Find keyframe rules with findRule()

Source: https://www.w3.org/TR/css-animations-1

Use findRule() to retrieve keyframe rules by their key text. The '0%' key maps to the from rule and 'to' maps to the 100% rule.

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

--------------------------------

### Define keyframes with timing functions for the 'bounce' animation

Source: https://www.w3.org/TR/css-animations-1

Defines a keyframe animation named 'bounce' with five keyframes. Each keyframe sets the 'top' property and an 'animation-timing-function' that applies between that keyframe and the next. The timing function on the 'to' or '100%' keyframe is ignored.

```css
@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;
  }

}
```

--------------------------------

### AnimationEvent constructor

Source: https://www.w3.org/TR/css-animations-1

Constructor for creating AnimationEvent objects.

```APIDOC
## [Constructor] AnimationEvent

### Description
Creates a new AnimationEvent object with the specified type and initialization dictionary.

### Method
Constructor

### Endpoint
new AnimationEvent(type, animationEventInitDict)

### Parameters
#### Constructor Parameters
- **type** (CSSOMString) - Required - The type of the animation event.
- **animationEventInitDict** (AnimationEventInit) - Optional - Initialization dictionary with default value {}.

### Request Example
```js
const event = new AnimationEvent('animationstart', { animationName: 'slide', elapsedTime: 0.5 });
```

### Response
#### Success Response
Returns a new AnimationEvent instance.

#### Response Example
```js
AnimationEvent { animationName: 'slide', elapsedTime: 0.5, pseudoElement: '' }
```
```

--------------------------------

### CSSKeyframesRule.findRule

Source: https://www.w3.org/TR/css-animations-1

Finds a keyframe rule by its selector.

```APIDOC
## [Method] findRule

### Description
Finds a keyframe rule by its selector.

### Method
findRule

### Endpoint
CSSKeyframesRule.findRule(select)

### Parameters
#### Parameters
- **select** (CSSOMString) - Required - The selector of the rule to find.

### Request Example
```js
const rule = keyframesRule.findRule('from');
```

### Response
#### Success Response
Returns a CSSKeyframeRule or null if not found.

#### Response Example
```js
CSSKeyframeRule { keyText: 'from', style: CSSStyleDeclaration }
```
```

--------------------------------

### findRule with full combined selector

Source: https://www.w3.org/TR/css-animations-1

Finds the red background rule by using the full combined selector '25%,75%'. The selector must match the number and order of values in the targeted rule, ignoring white space.

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

```

--------------------------------

### Extend GlobalEventHandlers with animation event handlers

Source: https://www.w3.org/TR/css-animations-1

Extends the GlobalEventHandlers mixin with event handler IDL attributes for animation events: onanimationstart, onanimationiteration, onanimationend, and onanimationcancel.

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

--------------------------------

### CSSKeyframesRule getter

Source: https://www.w3.org/TR/css-animations-1

Getter that returns the keyframe rule at the given index.

```APIDOC
## [Getter] CSSKeyframesRule[index]

### Description
Returns the keyframe rule at the specified index.

### Method
Getter

### Endpoint
CSSKeyframesRule[index]

### Parameters
#### Index
- **index** (unsigned long) - Required - The index of the rule to retrieve.

### Request Example
```js
const rule = keyframesRule[0];
```

### Response
#### Success Response
Returns a CSSKeyframeRule object.

#### Response Example
```js
CSSKeyframeRule { keyText: 'from', style: CSSStyleDeclaration }
```
```

--------------------------------

### GlobalEventHandlers.onanimationiteration

Source: https://www.w3.org/TR/css-animations-1

Event handler for the animationiteration event.

```APIDOC
## [Event Handler] onanimationiteration

### Description
Event handler for the animationiteration event.

### Method
Event Handler

### Endpoint
GlobalEventHandlers.onanimationiteration

### Parameters
#### Attribute Value
- **onanimationiteration** (EventHandler) - Required - The event handler.

### Request Example
```js
element.onanimationiteration = function(event) { console.log('iteration'); };
```

### Response
#### Success Response
Returns the assigned event handler.

#### Response Example
```js
function(event) { console.log('iteration'); }
```
```

--------------------------------

### CSSKeyframeRule IDL interface

Source: https://www.w3.org/TR/css-animations-1

Defines the CSSKeyframeRule interface for a single keyframe rule. The keyText attribute holds the keyframe selector as a comma-separated list of percentage values, with from and to mapping to 0% and 100%. Updating keyText with an invalid selector throws a SyntaxError and leaves the value unchanged.

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

```

--------------------------------

### CSSKeyframesRule Interface

Source: https://www.w3.org/TR/css-animations-1

The CSSKeyframesRule interface represents a complete set of keyframes for a single animation. It provides methods to append, delete, and find keyframe rules, as well as indexed access to the keyframe list.

```APIDOC
## [CSSKeyframesRule] Interface

### Description
Represents a complete set of keyframes for a single CSS animation.

### Interface
CSSKeyframesRule : CSSRule

### Attributes
- **name** (CSSOMString) - The name of the keyframes, used by the `animation-name` property.
- **cssRules** (CSSRuleList, readonly) - Gives access to the keyframes in the list.
- **length** (unsigned long, readonly) - The number of keyframes in the list.

### Indexed Property Getter
Returns the `CSSKeyframeRule` at the given index.

#### Parameters
- **index** (unsigned long) - The zero-based index of the rule to return.

#### Return Value
- **CSSKeyframeRule** - The found rule, or `undefined` if no rule exists at that index.

### appendRule(rule)
Appends the passed `CSSKeyframeRule` at the end of the keyframes rule.

#### Parameters
- **rule** (CSSOMString) - The rule to append, expressed in the same syntax as one entry in the `@keyframes` rule. A valid rule is always appended even if its key(s) already exist.

#### Return Value
None.

### deleteRule(select)
Deletes the last declared `CSSKeyframeRule` matching the specified keyframe selector. If no matching rule exists, does nothing.

#### Parameters
- **select** (CSSOMString) - The keyframe selector of the rule to delete: a comma-separated list of percentage values between 0% and 100% or the keywords `from` or `to` (resolving to 0% and 100%). The number and order of values must match the targeted rule; matching is not sensitive to whitespace.

#### Return Value
None.

### findRule(select)
Returns the last declared `CSSKeyframeRule` matching the specified keyframe selector. If no matching rule exists, returns `null`.

#### Parameters
- **select** (CSSOMString) - The keyframe selector of the rule to find: a comma-separated list of percentage values between 0% and 100% or the keywords `from` or `to`. The number and order of values must match the targeted rule; matching is not sensitive to whitespace.

#### Return Value
- **CSSKeyframeRule** - The found rule, or `null` if no match.

### IDL Definition
```
[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);
};
```
```

--------------------------------

### CSSRule

Source: https://www.w3.org/TR/css-animations-1

The CSSRule interface is extended with two new rule types: KEYFRAMES_RULE and KEYFRAME_RULE, providing identification for the new keyframe and keyframes rules.

```APIDOC
## [Interface] CSSRule

### Description
The `CSSRule` interface is extended with two new rule types for keyframes and keyframe rules.

### IDL Definition
```
partial interface CSSRule {
    const unsigned short KEYFRAMES_RULE = 7;
    const unsigned short KEYFRAME_RULE = 8;
};
```
```

--------------------------------

### GlobalEventHandlers.onanimationend

Source: https://www.w3.org/TR/css-animations-1

Event handler for the animationend event.

```APIDOC
## [Event Handler] onanimationend

### Description
Event handler for the animationend event.

### Method
Event Handler

### Endpoint
GlobalEventHandlers.onanimationend

### Parameters
#### Attribute Value
- **onanimationend** (EventHandler) - Required - The event handler.

### Request Example
```js
element.onanimationend = function(event) { console.log('end'); };
```

### Response
#### Success Response
Returns the assigned event handler.

#### Response Example
```js
function(event) { console.log('end'); }
```
```

--------------------------------

### CSSKeyframesRule.length

Source: https://www.w3.org/TR/css-animations-1

Read-only attribute that provides the number of keyframe rules.

```APIDOC
## [Attribute] length

### Description
Returns the number of keyframe rules in the keyframes rule.

### Method
Read-only attribute

### Endpoint
CSSKeyframesRule.length

### Parameters
None

### Response
#### Success Response
Returns an unsigned long representing the number of rules.

#### Response Example
```js
const count = rule.length; // 2
```
```

--------------------------------

### CSSKeyframesRule IDL interface

Source: https://www.w3.org/TR/css-animations-1

Defines the CSSKeyframesRule interface for a complete set of keyframes. It provides access to the keyframes list, supports indexed access, and includes methods to append, delete, and find keyframe rules by selector. The name attribute is used by the animation-name property.

```webidl
[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);
};

```

--------------------------------

### CSSKeyframeRule.style

Source: https://www.w3.org/TR/css-animations-1

Read-only attribute that provides the style declaration of the keyframe rule.

```APIDOC
## [Attribute] style

### Description
Returns the CSSStyleDeclaration object representing the style of the keyframe rule.

### Method
Read-only attribute

### Endpoint
CSSKeyframeRule.style

### Parameters
None

### Response
#### Success Response
Returns a CSSStyleDeclaration object.

#### Response Example
```js
const style = rule.style; // CSSStyleDeclaration
```
```

--------------------------------

### CSSKeyframesRule.appendRule

Source: https://www.w3.org/TR/css-animations-1

Appends a keyframe rule to the CSSKeyframesRule.

```APIDOC
## [Method] appendRule

### Description
Appends a new keyframe rule to the keyframes rule.

### Method
appendRule

### Endpoint
CSSKeyframesRule.appendRule(rule)

### Parameters
#### Parameters
- **rule** (CSSOMString) - Required - The rule to append.

### Request Example
```js
keyframesRule.appendRule('from { opacity: 0; }');
```

### Response
#### Success Response
Returns undefined.

#### Response Example
```js
undefined
```
```

--------------------------------

### Same-name @keyframes rules (first ignored)

Source: https://www.w3.org/TR/css-animations-1

Two @keyframes rules with the same name (foo). Because names are case-sensitive and compared codepoint-by-codepoint, the first rule is ignored and the last one in document order wins.

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

```

--------------------------------

### onanimationend

Source: https://www.w3.org/TR/css-animations-1

The onanimationend event handler is supported on HTML elements, Document, and Window objects. It corresponds to the animationend event.

```APIDOC
## [Event Handler] onanimationend

### Description
The `onanimationend` event handler must be supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and by all `Document` and `Window` objects, as event handler IDL attributes.

### Event Handler Event Type
`animationend`
```

--------------------------------

### CSSKeyframesRule.cssRules

Source: https://www.w3.org/TR/css-animations-1

Read-only attribute that provides the list of CSS rules in the keyframes rule.

```APIDOC
## [Attribute] cssRules

### Description
Returns the list of CSS rules contained in the keyframes rule.

### Method
Read-only attribute

### Endpoint
CSSKeyframesRule.cssRules

### Parameters
None

### Response
#### Success Response
Returns a CSSRuleList object.

#### Response Example
```js
const rules = rule.cssRules; // CSSRuleList
```
```

--------------------------------

### Delete and find keyframe rule by selector

Source: https://www.w3.org/TR/css-animations-1

Deletes the last declared 10% rule (the green background color rule) and then finds the remaining blue background rule, storing it in tenPercent. Demonstrates that deleteRule removes the last matching rule and findRule returns the last matching rule.

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

```

--------------------------------

### onanimationiteration

Source: https://www.w3.org/TR/css-animations-1

The onanimationiteration event handler is supported on HTML elements, Document, and Window objects. It corresponds to the animationiteration event.

```APIDOC
## [Event Handler] onanimationiteration

### Description
The `onanimationiteration` event handler must be supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and by all `Document` and `Window` objects, as event handler IDL attributes.

### Event Handler Event Type
`animationiteration`
```

--------------------------------

### GlobalEventHandlers.onanimationcancel

Source: https://www.w3.org/TR/css-animations-1

Event handler for the animationcancel event.

```APIDOC
## [Event Handler] onanimationcancel

### Description
Event handler for the animationcancel event.

### Method
Event Handler

### Endpoint
GlobalEventHandlers.onanimationcancel

### Parameters
#### Attribute Value
- **onanimationcancel** (EventHandler) - Required - The event handler.

### Request Example
```js
element.onanimationcancel = function(event) { console.log('cancel'); };
```

### Response
#### Success Response
Returns the assigned event handler.

#### Response Example
```js
function(event) { console.log('cancel'); }
```
```

--------------------------------

### @keyframes grammar definition

Source: https://www.w3.org/TR/css-animations-1

Grammar for the @keyframes at-rule, its name, keyframe blocks, and selectors. The <rule-list> may only contain <keyframe-block> rules, and the <declaration-list> accepts any CSS property except those defined in this specification, with animation-timing-function interpreted specially.

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

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

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

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

```

--------------------------------

### Invalid @keyframes names (initial, None)

Source: https://www.w3.org/TR/css-animations-1

Invalid @keyframes rules because initial and None are disallowed <custom-ident> values. The <custom-ident> excludes the none keyword, and other disallowed values include initial.

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

```

--------------------------------

### animationiteration

Source: https://www.w3.org/TR/css-animations-1

The animationiteration event fires at the end of each iteration of an animation (except when animationend would fire). It provides the animation name, elapsed time, and pseudo-element.

```APIDOC
## [Event] animationiteration

### Description
The `animationiteration` event occurs at the end of each iteration of an animation, except when an `animationend` event would fire at the same time. This event does not occur for animations with an iteration count of one or less. The `elapsedTime` member is equal to the product of the current iteration and `animation-duration`.

### Event Type
`animationiteration`

### Bubbles
Yes

### Cancelable
No

### Context Info
- `animationName` (CSSOMString) - The value of the `animation-name` property of the animation that fired the event.
- `elapsedTime` (double) - The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused.
- `pseudoElement` (CSSOMString) - The name (beginning with two colons) of the CSS pseudo-element on which the animation runs, or the empty string if the animation runs on an element.

### Event Constructor
`AnimationEvent(type, animationEventInitDict)`
```

--------------------------------

### findRule with incomplete selector returns null

Source: https://www.w3.org/TR/css-animations-1

Attempts to find a keyframe rule with selector '75%'. Because the red background rule uses the combined selector '25%,75%', this returns null.

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

```

--------------------------------

### CSSRule.KEYFRAME_RULE

Source: https://www.w3.org/TR/css-animations-1

Constant for the CSSRule type of individual keyframe rules.

```APIDOC
## [Constant] KEYFRAME_RULE

### Description
Constant representing the CSSRule type for individual keyframe rules.

### Method
Constant

### Endpoint
CSSRule.KEYFRAME_RULE

### Parameters
None

### Response
#### Success Response
Returns the unsigned short value 8.

#### Response Example
```js
const ruleType = CSSRule.KEYFRAME_RULE; // 8
```
```

--------------------------------

### CSSRule.KEYFRAMES_RULE

Source: https://www.w3.org/TR/css-animations-1

Constant for the CSSRule type of @keyframes rules.

```APIDOC
## [Constant] KEYFRAMES_RULE

### Description
Constant representing the CSSRule type for @keyframes rules.

### Method
Constant

### Endpoint
CSSRule.KEYFRAMES_RULE

### Parameters
None

### Response
#### Success Response
Returns the unsigned short value 7.

#### Response Example
```js
const ruleType = CSSRule.KEYFRAMES_RULE; // 7
```
```

--------------------------------

### animationend

Source: https://www.w3.org/TR/css-animations-1

The animationend event fires when an animation finishes. It provides the animation name, elapsed time (equal to the active duration), and pseudo-element.

```APIDOC
## [Event] animationend

### Description
The `animationend` event occurs when the animation finishes. The value of the `elapsedTime` member of the event is equal to the active duration.

### Event Type
`animationend`

### Bubbles
Yes

### Cancelable
No

### Context Info
- `animationName` (CSSOMString) - The value of the `animation-name` property of the animation that fired the event.
- `elapsedTime` (double) - The amount of time the animation has been running, in seconds, when this event fired, excluding any time the animation was paused.
- `pseudoElement` (CSSOMString) - The name (beginning with two colons) of the CSS pseudo-element on which the animation runs, or the empty string if the animation runs on an element.

### Event Constructor
`AnimationEvent(type, animationEventInitDict)`
```

--------------------------------

### onanimationcancel

Source: https://www.w3.org/TR/css-animations-1

The onanimationcancel event handler is supported on HTML elements, Document, and Window objects. It corresponds to the animationcancel event.

```APIDOC
## [Event Handler] onanimationcancel

### Description
The `onanimationcancel` event handler must be supported by all HTML elements, as both event handler content attributes and event handler IDL attributes; and by all `Document` and `Window` objects, as event handler IDL attributes.

### Event Handler Event Type
`animationcancel`
```

--------------------------------

### Valid @keyframes names with strings

Source: https://www.w3.org/TR/css-animations-1

Valid @keyframes rules using <string> names to specify the disallowed <custom-ident> values initial and None. The string syntax is equivalent in functionality to the ident syntax.

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

```

--------------------------------

### CSSKeyframeRule Interface

Source: https://www.w3.org/TR/css-animations-1

The CSSKeyframeRule interface represents a single keyframe rule within a CSS animation. It exposes the keyframe selector as keyText and the associated style declarations via the style attribute.

```APIDOC
## [CSSKeyframeRule] Interface

### Description
Represents the style rule for a single key in a CSS animation keyframes rule.

### Interface
CSSKeyframeRule : CSSRule

### Attributes
- **keyText** (CSSOMString) - The keyframe selector as a comma-separated list of percentage values. The `from` and `to` keywords map to `0%` and `100%`. If updated with an invalid selector, a `SyntaxError` is thrown and the value remains unchanged.
- **style** (CSSStyleDeclaration, readonly) - Returns a `CSSStyleDeclaration` object for the keyframe rule with the `readonly` flag unset, declarations in specified order, parent CSS rule set to this `CSSKeyframeRule`, and owner node null.

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

--------------------------------

### AnimationEvent.pseudoElement

Source: https://www.w3.org/TR/css-animations-1

Read-only attribute that provides the pseudo-element associated with the animation.

```APIDOC
## [Attribute] pseudoElement

### Description
Returns the name of the pseudo-element on which the animation occurred.

### Method
Read-only attribute

### Endpoint
pseudoElement

### Parameters
None

### Response
#### Success Response
Returns a CSSOMString representing the pseudo-element name.

#### Response Example
```js
const pseudo = event.pseudoElement; // '::before'
```
```

--------------------------------

### Case-sensitive @keyframes name FOO

Source: https://www.w3.org/TR/css-animations-1

A @keyframes rule with the name FOO, which is different from the previous foo rules because names are case-sensitive.

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

```
Tokens:
Raw