WPT
wpt / web-animations / interfaces / Animatable / animate.html
Spec: Web Animations ↗
Runs: Chrome 155.0.8041.0 (wpt@18be93235, 2026-09-04) | Firefox 157.0a1 (wpt@1b4bc17cf, 2026-09-04) | Safari 251 preview (wpt@2c385f65e, 2026-09-04) | Ladybird 1.0-17043 (wpt@25681acff, 2026-09-04) | Servo Servo 0.6 (wpt@2c385f65e, 2026-09-04) | Blitz a50cb8971 (wpt@a95401e4e, 2026-09-03)
View on the Blitz WPT dashboard | Open test on wpt.live | wpt.fyi
| Chrome | Firefox | Safari | Ladybird | Servo | Blitz | |
|---|---|---|---|---|---|---|
| Total | 153/153 | 150/153 | 152/153 | 141/153 | 55/153 | NOT RUN |
| Subtest | Chrome | Firefox | Safari | Ladybird | Servo | Blitz |
|---|---|---|---|---|---|---|
| Element.animate() creates an Animation object | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() creates an Animation object in the relevant realm of the target element | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() creates an Animation object with a KeyframeEffect | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() creates an Animation object with a KeyframeEffect that is created in the relevant realm of the target element | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts empty keyframe lists (input: []) | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts empty keyframe lists (input: null) | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts empty keyframe lists (input: undefined) | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one shorthand property two value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property (one shorthand and one of its longhand components) two value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property (one shorthand and one of its shorthand components) two value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property two value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property property-indexed keyframes specification with different numbers of values | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframes specification with an invalid value | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two value property-indexed keyframes specification that needs to stringify its values | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframes specification with a CSS variable reference | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframes specification with a CSS variable reference in a shorthand property | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property one value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property one non-array value property-indexed keyframes specification | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two value property-indexed keyframes specification where the first value is invalid | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two value property-indexed keyframes specification where the second value is invalid | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframes specification with a CSS variable as the property | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single offset | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets that is too short | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets that is too long | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an empty array of offsets | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets with an embedded null value | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets with a trailing null value | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets with leading and trailing null values | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets with adjacent null values | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets with all null values (and too many at that) | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single null offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of offsets that is not strictly ascending in the unused part of the array | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe without any specified easing | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single easing | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of easings | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of easings that is too short | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single-element array of easings | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an empty array of easings | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with an array of easings that is too long | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single composite operation | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a composite array | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a composite array that is too short | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a composite array that is too long | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a property-indexed keyframe with a single-element composite array | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property one keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property two keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one shorthand property two keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property (a shorthand and one of its component longhands) two keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property keyframe sequence where one property is missing from the first keyframe | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property keyframe sequence where one property is missing from the last keyframe | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a one property two keyframe sequence that needs to stringify its values | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with a CSS variable reference | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with a CSS variable reference in a shorthand property | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with a CSS variable as its property | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with duplicate values for a given interior offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with duplicate values for offsets 0 and 1 | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a two property four keyframe sequence | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a single keyframe sequence with omitted offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a single keyframe sequence with null offset | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a single keyframe sequence with string offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a single keyframe sequence with a single calc() offset | PASS | PASS | FAIL | FAIL | FAIL | — |
| Element.animate() accepts a one property keyframe sequence with some omitted offsets | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a one property keyframe sequence with some null offsets | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a two property keyframe sequence with some omitted offsets | PASS | PASS | PASS | FAIL | FAIL | — |
| Element.animate() accepts a one property keyframe sequence with all omitted offsets | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with different easing values, but the same easing value for a given offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a keyframe sequence with different composite values, but the same composite value for a given offset | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() does not accept keyframes with an out-of-bounded positive offset | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept keyframes with an out-of-bounded negative offset | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes not loosely sorted by offset | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes not loosely sorted by offset even though not all offsets are specified | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes with offsets out of range | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept keyframes not loosely sorted by offset | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes with an invalid easing value | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes with an invalid easing value as one of the array values | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframe with an invalid easing in the unused part of the array of easings | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept empty property-indexed keyframe with an invalid easing | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept empty property-indexed keyframe with an invalid easings array | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept a keyframe sequence with an invalid easing value | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes with an invalid composite value | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept property-indexed keyframes with an invalid composite value as one of the array values | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept keyframes with an invalid composite value | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() accepts a double as an options argument | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts a KeyframeAnimationOptions argument | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() accepts an absent options argument | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() does not accept invalid delay value: NaN | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid delay value: Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid delay value: -Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() accepts a duration of 'auto' using a dictionary object | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() does not accept invalid duration value: -1 | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: NaN | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: -Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: "abc" | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: -1 using a dictionary object | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: NaN using a dictionary object | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: -Infinity using a dictionary object | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: "abc" using a dictionary object | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid duration value: "100" using a dictionary object | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: '' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: '7' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'test' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'initial' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'inherit' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'unset' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'unrecognized' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'var(--x)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'ease-in-out, ease-out' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'cubic-bezier(1.1, 0, 1, 1)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'cubic-bezier(0, 0, 1.1, 1)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'cubic-bezier(-0.1, 0, 1, 1)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'cubic-bezier(0, 0, -0.1, 1)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'cubic-bezier(0.1, 0, 4, 0.4)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'steps(-1, start)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'steps(0.1, start)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'steps(3, nowhere)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'steps(-3, end)' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'function (a){return a}' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'function (x){return x}' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid easing: 'function(x, y){return 0.3}' | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterationStart value: -1 | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterationStart value: NaN | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterationStart value: Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterationStart value: -Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterations value: -1 | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterations value: -Infinity | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() does not accept invalid iterations value: NaN | PASS | PASS | PASS | PASS | PASS | — |
| Element.animate() correctly sets the id attribute when no id is specified | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the id attribute | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline when triggered on an element in a different document | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline with no timeline parameter in KeyframeAnimationOptions. | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline with undefined timeline in KeyframeAnimationOptions. | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline with null timeline in KeyframeAnimationOptions. | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() correctly sets the Animation's timeline with DocumentTimeline in KeyframeAnimationOptions. | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() calls play on the Animation | PASS | PASS | PASS | PASS | FAIL | — |
| Element.animate() does NOT trigger a style change event | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement parameter creates an Animation object | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement parameter without content creates an Animation object | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement parameter creates an Animation object for ::marker | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement parameter creates an Animation object for ::first-line | PASS | FAIL | PASS | PASS | FAIL | — |
| animate() with pseudoElement an Animation object targeting the correct pseudo-element | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement without content creates an Animation object targeting the correct pseudo-element | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::marker | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement an Animation object targeting the correct pseudo-element for ::first-line | PASS | FAIL | PASS | PASS | FAIL | — |
| animate() with a non-null invalid pseudoElement '' throws a SyntaxError | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with a non-null invalid pseudoElement 'before' throws a SyntaxError | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with a non-null invalid pseudoElement ':abc' throws a SyntaxError | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with a non-null invalid pseudoElement '::abc' throws a SyntaxError | PASS | PASS | PASS | PASS | FAIL | — |
| animate() with pseudoElement ::placeholder does not throw | PASS | FAIL | PASS | PASS | FAIL | — |
| Finished fill animation doesn't replace animation on a different pseudoElement | PASS | PASS | PASS | FAIL | FAIL | — |