Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Animating SVG with CSS Keyframe and Line Drawing Animations Creating an SVG Animation Sequence

Sasha Drmic
Sasha Drmic
12,316 Points
Posted by Sasha Drmic
Sasha Drmic
12,316 Points

Animation-fill-mode

From what I've understood, animation-fill-mode defines what styles will be apllied to an element before the animation has started and after the animation is finished. If that's the case, I don't understand the part in the video where Guil Hernandez sets the animation-fill-mode for grow animation to Backwards. I know that backwards enables the elements to start from scale(0), but after the animation is finished, the elements stayed at the scale (1).

How come?

1 Answer

Michael Braga
seal-mask
PLUS
.a{fill-rule:evenodd;}techdegree seal-36
Michael Braga
Full Stack JavaScript Techdegree Graduate 24,174 Points
Michael Braga
.a{fill-rule:evenodd;}techdegree seal-36
Michael Braga
Full Stack JavaScript Techdegree Graduate 24,174 Points

The keyword value backwards is different from forwards when applied to animation-fill-mode. Reading the spec on the value backwards for animation-fill-mode, it does not mention anything on retaining its final set of styles, as defined in the last keyframe. Instead, it applies the styles of the initial keyframe during the duration of the delay and stays like that till the delay duration ends.

But the spec does mention that the forwards value does retain the final set of styles once the animation ends. My guess is that with the value backwards, once the animation is done, the element(s) go back to its initial position/styles before the animation took place.

You can read it up on : https://www.w3.org/TR/css3-animations/#animation-fill-mode-property

There is also a decent example on backwards here: https://www.sitepoint.com/understanding-css-animation-fill-mode-property/