CSS Animations Module Level 1 CR Test Suite

Keyframes (68 tests)

Test Refs Flags Info
+ 4 Keyframes
animation-keyframes-001 Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002 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 Animated @keyframes - animation-timing-function
  • Check that @keyframes rule accpets 'animation-timing-function' property used as the animation moves to the next keyframe.
+ 4.1 Timing functions for keyframes
+ 4.2 The ‘animation-name’ Property
animation-delay-001 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 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 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 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006 Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007 Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-direction-001 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 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 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 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 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-display 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 Animated animation-duration - blank value
  • When animation-duration value is set blank, there will be no animation seen.
animation-duration-002 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 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 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 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 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 Animated animation-duration - ::before
  • Check that animation-duration applies to the ::before pseudo element.
animation-duration-008 Animated animation-duration - ::after
  • Check that animation-duration applies to the ::after pseudo element.
animation-fill-mode-001 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 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 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 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 Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006 Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-iteration-count-001 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 Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003 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 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 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 Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007 Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008 Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event 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 Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002 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 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 Animated animation-name - blank value
  • Check that animation-name is set without any value, there will be no animation.
animation-name-002 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 Animated animation-name - none
  • Check that animation-name is set to none, there will be no animation.
animation-name-004 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 Animated animation-name - ::after
  • Check that animation-name applies to the ::after pseudo element.
animation-name-006 Animated animation-name - ::before
  • Check that animation-name applies to the ::before pseudo element.
animation-play-state-001 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 Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003 Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004 Animated animation-play-state - ::before
  • Check that animation-play-state applies to the ::before pseudo element.
animation-timing-function-001 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 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 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 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 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 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 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 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 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 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 Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012 Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
animationstart-and-animationend-events 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 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 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 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 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006 Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007 Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-direction-001 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 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 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 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 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-display 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 Animated animation-duration - blank value
  • When animation-duration value is set blank, there will be no animation seen.
animation-duration-002 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 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 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 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 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 Animated animation-duration - ::before
  • Check that animation-duration applies to the ::before pseudo element.
animation-duration-008 Animated animation-duration - ::after
  • Check that animation-duration applies to the ::after pseudo element.
animation-fill-mode-001 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 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 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 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 Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006 Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-iteration-count-001 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 Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003 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 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 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 Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007 Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008 Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event 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 Animated @keyframes - from, to, percentage
  • Check that @keyframes rule accepts 'from' and 'to' keywords, and percentage values.
animation-keyframes-002 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 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 Animated animation-name - blank value
  • Check that animation-name is set without any value, there will be no animation.
animation-name-002 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 Animated animation-name - none
  • Check that animation-name is set to none, there will be no animation.
animation-name-004 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 Animated animation-name - ::after
  • Check that animation-name applies to the ::after pseudo element.
animation-name-006 Animated animation-name - ::before
  • Check that animation-name applies to the ::before pseudo element.
animation-play-state-001 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 Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003 Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004 Animated animation-play-state - ::before
  • Check that animation-play-state applies to the ::before pseudo element.
animation-timing-function-001 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 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 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 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 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 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 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 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 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 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 Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012 Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
animationstart-and-animationend-events 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 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-timing-function-001 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 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 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 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 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 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 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 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 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 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 Animated animation-timing-function - ::after
  • Check that animation-timing-function applies to the ::after pseudo element.
animation-timing-function-012 Animated animation-timing-function - ::before
  • Check that animation-timing-function applies to the ::before pseudo element.
+ 4.5 The ‘animation-iteration-count’ Property
animation-direction-001 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 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 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 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 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 Animated animation-direction - ::before
  • Check that animation-direction applies to the ::before pseudo element
animation-iteration-count-001 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 Animated animation-iteration-count - infinite value
  • When animation-iteration-count is set to infinite, animation will repeat forever.
animation-iteration-count-003 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 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 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 Animated animation-iteration-count - 0 (zero)
  • When animation-iteration-count is set to 0 (zero), no animation is seen.
animation-iteration-count-007 Animated animation-iteration-count - ::after
  • Check that animation-iteration-count applies to the ::after pseudo element.
animation-iteration-count-008 Animated animation-iteration-count - ::before
  • Check that animation-iteration-count applies to the ::before pseudo element.
animation-iteration-event 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 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 Animated animation-direction - normal
  • When animation-direction is set to normal, all iterations of animation are played as specified.
animation-direction-003 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 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 Animated animation-direction - ::after
  • Check that animation-direction applies to the ::after pseudo element.
animation-direction-006 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 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 Animated animation-play-state - running
  • When animation-play-state is set to running, animation will proceed as normal.
animation-play-state-003 Animated animation-play-state - ::after
  • Check that animation-play-state applies to the ::after pseudo element.
animation-play-state-004 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 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 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 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 Animated animation-delay - ::after
  • Check that animation-delay applies to the ::after pseudo element.
animation-delay-005 Animated animation-delay - ::before
  • Check that animation-delay applies to the ::before pseudo element.
animation-delay-006 Animated animation-delay - initial keyword
  • Check that animation-delay property accepts 'initial' keyword.
animation-delay-007 Animated animation-delay - inherit keyword
  • Check that animation-delay property accepts 'inherit' keyword.
animation-fill-mode-003 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 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 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 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 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 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 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 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 Animated animation-fill-mode - ::after
  • Check that animation-fill-mode applies to the ::after pseudo element.
animation-fill-mode-006 Animated animation-fill-mode - ::before
  • Check that animation-fill-mode applies to the ::before pseudo element.
animation-timing-function-007 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 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 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
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.
animation-shorthand-001 Animated animation shorthand
  • Check that animation shorthand property accepts time values for animation-duration and animation-delay in order.
animation-shorthand-002 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 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