CSS Animations Module Level 1 CR Test Suite

Keyframes (82 tests)

Test Refs Flags Info
+ 4 Keyframes
animation-keyframes-001-manual Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002-manual Animated @keyframes - negative percentage and higher than 100%
  • Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.
animation-keyframes-003-manual Animated @keyframes - animation-timing-function
  • Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.
animation-timeline-in-keyframe Script
column-gap-animation-001 Script column-gap test animation
  • This test checks that column-gap property is interpolable.
column-gap-animation-002 Script column-gap normal test animation
  • This test checks that 'normal' value for column-gap property is not interpolable.
column-gap-animation-003 Script Default column-gap test animation
  • This test checks that the default value for column-gap property, which is 'normal', is not interpolable.
gap-animation-001 Script gap test animation
  • This test checks that gap property is interpolable.
gap-animation-002 Script gap normal test animation
  • This test checks that 'normal' value for gap property is not interpolable.
gap-animation-003 Script Default gap test animation
  • This test checks that the default value for gap property, which is 'normal', is not interpolable.
gap-animation-004 Script gap test animation
  • This test checks that gap property is interpolable for each longhand (row-gap and column-gap) independently.
marker-supported-properties-in-animation Script Supported properties in ::marker animations
  • This test checks ::marker supports animations and transitions, but only for the properties that apply to ::marker.
row-gap-animation-001 Script row-gap test animation
  • This test checks that row-gap property is interpolable.
row-gap-animation-002 Script row-gap normal test animation
  • This test checks that 'normal' value for row-gap property is not interpolable.
row-gap-animation-003 Script Default row-gap test animation
  • This test checks that the default value for row-gap property, which is 'normal', is not interpolable.
+ 4.1 Timing functions for keyframes
+ 4.2 The animation-name property
animation-delay-001-manual Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002-manual Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003-manual Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004-manual Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005-manual Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006-manual Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007-manual Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-direction-001-manual Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002-manual Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003-manual Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004-manual Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005-manual Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006-manual Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-display-manual Animated animation - display
  • Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.
animation-duration-001-manual Animated animation-duration - blank value
  • When animation-duration value is set blank, there will be no animation seen.
animation-duration-002-manual Animated animation-duration - finite value
  • When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.
animation-duration-003-manual Animated animation-duration - negative value
  • When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.
animation-duration-004-manual Animated animation-duration - 0s
  • When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.
animation-duration-005-manual Animated animation-duration - 0s, animation-fill-mode - forwards
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.
animation-duration-006-manual Animated animation-duration - 0s, animation-fill-mode - both
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
animation-duration-007-manual Animated animation-duration - ::before
  • Check that animation-duration applies to the ::before pseudo element.
animation-duration-008-manual Animated animation-duration - ::after
  • Check that animation-duration applies to the ::after pseudo element.
animation-fill-mode-001-manual Animated animation-fill-mode - none
  • When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
animation-fill-mode-002-manual Animated animation-fill-mode - forwards
  • When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
animation-fill-mode-003-manual Animated animation-fill-mode - backwards
  • When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
animation-fill-mode-004-manual Animated animation-fill-mode - both
  • Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
animation-fill-mode-005-manual Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006-manual Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-iteration-count-001-manual Animated animation-iteration-count - default value
  • When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002-manual Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003-manual Animated animation-iteration-count - negative value
  • When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.
animation-iteration-count-004-manual Animated animation-iteration-count - non-integer value
  • When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.
animation-iteration-count-005-manual Animated animation-iteration-count - integer value
  • When animation-iteration-count is set to integer count, animation will repeat the specified number of times.
animation-iteration-count-006-manual Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007-manual Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008-manual Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event-manual Animated animation events - animationiteration
  • Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-keyframes-001-manual Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002-manual Animated @keyframes - negative percentage and higher than 100%
  • Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.
animation-keyframes-003-manual Animated @keyframes - animation-timing-function
  • Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.
animation-name-001-manual Animated animation-name - blank value
  • Check that animation-name is set without any value, there will be no animation.
animation-name-002-manual Animated animation-name matchs keyframes at-rule
  • When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.
animation-name-003-manual Animated animation-name - none
  • Check that animation-name is set to none, there will be no animation.
animation-name-004-manual Animated animation-name mismatches keyframe at-rule
  • Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
animation-name-005-manual Animated animation-name - ::after
  • Check that animation-name applies to the ::after pseudo element.
animation-name-006-manual Animated animation-name - ::before
  • Check that animation-name applies to the ::before pseudo element.
animation-opacity-pause-and-set-time = pauses a opacity animation and sets the current time
animation-play-state-001-manual Animated animation-play-state - paused
  • When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
animation-play-state-002-manual Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003-manual Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004-manual Animated animation-play-state - ::before
  • Check that animation-play-state applies to the ::before pseudo element.
animation-timing-function-001-manual Animated animation-timing-function - cubic-bezier with parameters (0,0,1,1)
  • When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
animation-timing-function-002-manual Animated animation-timing-function - ease
  • Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
animation-timing-function-003-manual Animated animation-timing-function - ease-in
  • Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
animation-timing-function-004-manual Animated animation-timing-function - ease-in-out
  • Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
animation-timing-function-005-manual Animated animation-timing-function - ease-out
  • Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
animation-timing-function-006-manual Animated animation-timing-function - linear
  • When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
animation-timing-function-007-manual Animated animation-timing-function - step-start
  • When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
animation-timing-function-008-manual Animated animation-timing-function - step-end
  • When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
animation-timing-function-009-manual Animated animation-timing-function - steps with parameters (<number>, start)
  • When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
animation-timing-function-010-manual Animated animation-timing-function - steps with parameters (<number>, end)
  • When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.
animation-timing-function-011-manual Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012-manual Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
animation-transform-pause-and-set-time = pauses a transform animation and sets the current time
animationstart-and-animationend-events-manual Animated animation events - animationstart and animationend
  • Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.
+ 4.3 The animation-duration property
animation-delay-001-manual Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002-manual Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003-manual Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004-manual Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005-manual Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006-manual Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007-manual Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-direction-001-manual Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002-manual Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003-manual Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004-manual Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005-manual Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006-manual Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-display-manual Animated animation - display
  • Check that setting 'display' property to 'none' terminates running animation applied to the element, and updating 'display' property to a value other than 'none' will start the animation.
animation-duration-001-manual Animated animation-duration - blank value
  • When animation-duration value is set blank, there will be no animation seen.
animation-duration-002-manual Animated animation-duration - finite value
  • When animation-duration is set a finite time offset, animation takes the specifies time to complete one cycle.
animation-duration-003-manual Animated animation-duration - negative value
  • When animation-duration is set to a negative value, it is treated as 0s (zero seconds) and no animation is seen.
animation-duration-004-manual Animated animation-duration - 0s
  • When animation-duration is set to 0s (zero seconds), animation occurs instantaneously, there will be no animation seen.
animation-duration-005-manual Animated animation-duration - 0s, animation-fill-mode - forwards
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.
animation-duration-006-manual Animated animation-duration - 0s, animation-fill-mode - both
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
animation-duration-007-manual Animated animation-duration - ::before
  • Check that animation-duration applies to the ::before pseudo element.
animation-duration-008-manual Animated animation-duration - ::after
  • Check that animation-duration applies to the ::after pseudo element.
animation-fill-mode-001-manual Animated animation-fill-mode - none
  • When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
animation-fill-mode-002-manual Animated animation-fill-mode - forwards
  • When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
animation-fill-mode-003-manual Animated animation-fill-mode - backwards
  • When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
animation-fill-mode-004-manual Animated animation-fill-mode - both
  • Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
animation-fill-mode-005-manual Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006-manual Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-iteration-count-001-manual Animated animation-iteration-count - default value
  • When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002-manual Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003-manual Animated animation-iteration-count - negative value
  • When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.
animation-iteration-count-004-manual Animated animation-iteration-count - non-integer value
  • When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.
animation-iteration-count-005-manual Animated animation-iteration-count - integer value
  • When animation-iteration-count is set to integer count, animation will repeat the specified number of times.
animation-iteration-count-006-manual Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007-manual Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008-manual Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event-manual Animated animation events - animationiteration
  • Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
animation-keyframes-001-manual Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002-manual Animated @keyframes - negative percentage and higher than 100%
  • Check that a keyframe selector specifies negative percentage values or values higher than 100%, the keyframe will be ignored.
animation-keyframes-003-manual Animated @keyframes - animation-timing-function
  • Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.
animation-name-001-manual Animated animation-name - blank value
  • Check that animation-name is set without any value, there will be no animation.
animation-name-002-manual Animated animation-name matchs keyframes at-rule
  • When animation-name is set to refer to a keyframe at-rule that provides the property values for the animation, animation will execute.
animation-name-003-manual Animated animation-name - none
  • Check that animation-name is set to none, there will be no animation.
animation-name-004-manual Animated animation-name mismatches keyframe at-rule
  • Check that animation-name does not match any keyframe at-rule, there are no properties to be animated and animation will not execute.
animation-name-005-manual Animated animation-name - ::after
  • Check that animation-name applies to the ::after pseudo element.
animation-name-006-manual Animated animation-name - ::before
  • Check that animation-name applies to the ::before pseudo element.
animation-opacity-pause-and-set-time = pauses a opacity animation and sets the current time
animation-play-state-001-manual Animated animation-play-state - paused
  • When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
animation-play-state-002-manual Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003-manual Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004-manual Animated animation-play-state - ::before
  • Check that animation-play-state applies to the ::before pseudo element.
animation-timing-function-001-manual Animated animation-timing-function - cubic-bezier with parameters (0,0,1,1)
  • When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
animation-timing-function-002-manual Animated animation-timing-function - ease
  • Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
animation-timing-function-003-manual Animated animation-timing-function - ease-in
  • Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
animation-timing-function-004-manual Animated animation-timing-function - ease-in-out
  • Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
animation-timing-function-005-manual Animated animation-timing-function - ease-out
  • Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
animation-timing-function-006-manual Animated animation-timing-function - linear
  • When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
animation-timing-function-007-manual Animated animation-timing-function - step-start
  • When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
animation-timing-function-008-manual Animated animation-timing-function - step-end
  • When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
animation-timing-function-009-manual Animated animation-timing-function - steps with parameters (<number>, start)
  • When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
animation-timing-function-010-manual Animated animation-timing-function - steps with parameters (<number>, end)
  • When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.
animation-timing-function-011-manual Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012-manual Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
animation-transform-pause-and-set-time = pauses a transform animation and sets the current time
animationstart-and-animationend-events-manual Animated animation events - animationstart and animationend
  • Check that animationstart event occurs at the start of an animation, animationend event occurs when animation finishes.
+ 4.4 The animation-timing-function property
animation-delay-001-manual Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-opacity-pause-and-set-time = pauses a opacity animation and sets the current time
animation-timing-function-001-manual Animated animation-timing-function - cubic-bezier with parameters (0,0,1,1)
  • When animation-timing-function is set to cubic-bezier with parameters (0,0,1,1), animation will progress over one cycle of its duration with constant speed.
animation-timing-function-002-manual Animated animation-timing-function - ease
  • Check that animation-timing-function is set to ease, animation will starts slow, gain acceleration in the middle and again slow down at the end.
animation-timing-function-003-manual Animated animation-timing-function - ease-in
  • Check that animation-timing-function is set to ease-in, animation will start slow, gain acceleration as time progresses.
animation-timing-function-004-manual Animated animation-timing-function - ease-in-out
  • Check that animation-timing-function is set to ease-in-out, animation will start slow, gain acceleration in the middel and again slow down at the end.
animation-timing-function-005-manual Animated animation-timing-function - ease-out
  • Check that animation-timing-function is set to ease-out, animation will start with higher (than the normal) speed and relatively slow down as time progresses.
animation-timing-function-006-manual Animated animation-timing-function - linear
  • When animation-timing-function is set to linear, animation will progress over one cycle of its duration with constant speed.
animation-timing-function-007-manual Animated animation-timing-function - step-start
  • When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
animation-timing-function-008-manual Animated animation-timing-function - step-end
  • When animation-timing-function is set to step-end, animation will play the end effect at the end time point, and keep the start effect at the start of the interval.
animation-timing-function-009-manual Animated animation-timing-function - steps with parameters (<number>, start)
  • When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
animation-timing-function-010-manual Animated animation-timing-function - steps with parameters (<number>, end)
  • When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.
animation-timing-function-011-manual Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012-manual Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
animation-transform-pause-and-set-time = pauses a transform animation and sets the current time
+ 4.5 The animation-iteration-count property
animation-direction-001-manual Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002-manual Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003-manual Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004-manual Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005-manual Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006-manual Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-iteration-count-001-manual Animated animation-iteration-count - default value
  • When animation-iteration-count is not set, 1 is taken by default and animation will play from beginning to end once.
animation-iteration-count-002-manual Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003-manual Animated animation-iteration-count - negative value
  • When animation-iteration-count is set to negative count, it is invalid and animation will play from beginning to end once.
animation-iteration-count-004-manual Animated animation-iteration-count - non-integer value
  • When animation-iteration-count is set to non-integer, animation will end partway through its last cycle.
animation-iteration-count-005-manual Animated animation-iteration-count - integer value
  • When animation-iteration-count is set to integer count, animation will repeat the specified number of times.
animation-iteration-count-006-manual Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007-manual Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008-manual Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event-manual Animated animation events - animationiteration
  • Check that animationiteration event occurs at the end of each iteration of an animation for which animation-iteration-count is greater than one.
+ 4.6 The animation-direction property
animation-direction-001-manual Animated animation-direction - alternate
  • When animation-direction is set to alternate, animation cycle will iteration that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-002-manual Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003-manual Animated animation-direction - alternate-reverse
  • When animation-direction is set to alternate-reverse, the animation cycle iterations that are odd counts are played in the normal direction, and the animation cycle iterations that are even counts are played in a reverse direction.
animation-direction-004-manual Animated animation-direction - reverse
  • When animation-direction is set to reverse, all iterations of the animation are played in the reverse direction from the way they were specified.
animation-direction-005-manual Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006-manual Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
+ 4.7 The animation-play-state property
animation-play-state-001-manual Animated animation-play-state - paused
  • When animation-play-state is set to paused, animation is paused where the progress it had made before being paused.
animation-play-state-002-manual Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003-manual Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004-manual Animated animation-play-state - ::before
  • Check that animation-play-state applies to the ::before pseudo element.
+ 4.8 The animation-delay property
animation-delay-001-manual Animated animation-delay - negative value
  • When animation-delay is set to a negative time offset, animation will execute as soon as it is applied but act as if the animation had started the specified time in the past.
animation-delay-002-manual Animated animation-delay - positive value
  • When animation-delay is set to a positive time offset, animation will delay execution by the specified offset value.
animation-delay-003-manual Animated animation-delay - 0s
  • When animation-delay is set to 0s (zero seconds), animation will execute as soon as it is applied.
animation-delay-004-manual Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005-manual Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006-manual Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007-manual Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-fill-mode-003-manual Animated animation-fill-mode - backwards
  • When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
animation-fill-mode-004-manual Animated animation-fill-mode - both
  • Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
+ 4.9 The animation-fill-mode property
animation-duration-005-manual Animated animation-duration - 0s, animation-fill-mode - forwards
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'forwards', the last frame of the animation will be displayed.
animation-duration-006-manual Animated animation-duration - 0s, animation-fill-mode - both
  • When animation-duration is set to 0s (zero seconds), and 'animation-fill-mode' is set to 'both', the last frame of the animation will be displayed.
animation-fill-mode-001-manual Animated animation-fill-mode - none
  • When animation-fill-mode is set to none, animation has no effect when it is applied but not executing.
animation-fill-mode-002-manual Animated animation-fill-mode - forwards
  • When animation-fill-mode is set to forwards, animation will apply the property values for the time the amination ended after the animation ends.
animation-fill-mode-003-manual Animated animation-fill-mode - backwards
  • When animation-fill-mode is set to backwards, animation-delay is set a positive time offset, and animation-direction is 'normal' or 'alternate-reverse', animation will apply the from or 0% keyframe that will start the first iteration.
animation-fill-mode-004-manual Animated animation-fill-mode - both
  • Check if animation-fill-mode is set to both, the effects of both 'forwards' and 'backwards' will apply.
animation-fill-mode-005-manual Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006-manual Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-timing-function-007-manual Animated animation-timing-function - step-start
  • When animation-timing-function is set to step-start, animation will play the end effect at the start of the interval.
animation-timing-function-009-manual Animated animation-timing-function - steps with parameters (<number>, start)
  • When animation-timing-function is set to steps with paramenters (<number>, start), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the start of the interval.
animation-timing-function-010-manual Animated animation-timing-function - steps with parameters (<number>, end)
  • When animation-timing-function is set to steps with paramenters (<number>, end), animation will be defined by the number that divides the domain of operation into equally size intervals, evey time the changes happens at the end of the interval.
+ 4.10 The animation shorthand property
animation-shorthand-001-manual Animated animation shorthand
  • Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.
animation-shorthand-002-manual Animated animation shorthand - ::after
  • Check that animation shorthand applies to the ::after pseudo element and accepts time values for animation-duration and animation-delay in order.
animation-shorthand-003-manual Animated animation shorthand - ::before
  • Check that animation shorthand applies to the ::before pseudo element and accepts time values for animation-duration and animation-delay in order.
caret-color-008 AnimatedInteract caret-color animation
  • Test checks that caret-color is animatable as a color
caret-color-021 Script Default caret-color test animation
  • Test checks that the default value for caret-color property, which is 'auto', is not interpolable.