Bug 105281 – animation-fill-mode doesn’t respect animation-direction

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Lea Verou]

Quoting the spec [1]:

> If the value for ‘animation-fill-mode’ is ‘backwards’, then the animation will apply the property values defined in the keyframe that will start the first iteration of the animation, during the period defined by ‘animation-delay’. These are either the values of the ‘from’ keyframe (when ‘animation-direction’ is ‘normal’ or ‘alternate’) or those of the ‘to’ keyframe (when ‘animation-direction’ is ‘reverse’ or ‘alternate-reverse’).

> If the value for ‘animation-fill-mode’ is ‘forwards’, then after the animation ends (as determined by its ‘animation-iteration-count’), the animation will apply the property values for the time the animation ended. When ‘animation-iteration-count’ is an integer greater than zero, the values applied will be those for the end of the last completed iteration of the animation (rather than the values for the start of the iteration that would be next). When ‘animation-iteration-count’ is zero, the values applied will be those that would start the first iteration (just as when ‘animation-fill-mode’ is ‘backwards’).

Therefore the attached testcase should be green, not red, since `animation-direction` is `reverse`. It’s green in every other tested browser that supports CSS animations.

[1]: http://dev.w3.org/csswg/css3-animations/#animation-fill-mode-property

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.