Understanding the CSS animation-fill-mode Property

Originally published at: http://www.sitepoint.com/understanding-css-animation-fill-mode-property/

I’m sure just about all of us working in front-end development have fiddled with CSS keyframe-based animations at some point. Some of us may have even created some pretty complex demos and experiments with this feature.

If you want a comprehensive introduction to the topic, my 2011 article on Smashing Magazine is still a good option. In this article, however, I wanted to focus on a single part of the CSS Animations spec: the animation-fill-mode property.

This is the one animation-based property that isn’t very self-explanatory. For example, nobody really gets confused by animation-name, animation-duration, and so forth… But what on earth does “fill mode” mean? Let’s briefly consider this, with some examples.

The Syntax for Defining a fill-mode

As you might already know, a basic keyframe animation is defined using the @keyframes at-rule. But the keyframes won’t do anything unless you associate them with an animation name. Here’s a shorthand animation property declaration, so you can see what I mean:

.example {
  animation: myAnim 2s 500ms 2 normal ease-in forwards;

And of course, this same shorthand line can be expanded to:

.example {
  animation-mame: myAnim;
  animation-duration: 2s;
  animation-delay: 500ms;
  animation-iteration-count: 2;
  animation-direction: normal;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;

The animation-fill-mode property is defined last in both examples, and in both cases the value is set to “forwards”. We don’t have to define it last, but that might be a good practice to get into.

Again, even if you’ve never used CSS animations, you can probably figure out what everything in that declaration above is doing – except animation-fill-mode.

Continue reading this article on SitePoint

Great article Louis - any questions I had were answered and the demos were great to follow through. I learned something :thumbsup: .

The slowness of the animations in those demos is slightly annoying :stuck_out_tongue:. (Fast animations = good UX.)

1 Like

Actually, that may not be true. There are more people with problems that you may think of and quite a few would feel dizzy if they have animations… furthermore if they go too quick. Even this would be too fast for them.

1 Like

I think the problem with uneasiness relates to full-page animations, mostly page transformations during scrolling. For small animations, related to e.g. icons and small boxes, quicker = better UX, I think. Forcing users to wait even 1 second for some UI effect to play out is nonsensical. Same with the 300ms tap delay. You would think 300ms is a smaller issue, but on the contrary, it is incredibly annoying.

1 Like

Picky picky! :smile:

But in retrospect, I think you’re right, so I sped them up a little bit (2s duration, 1s delay). Thanks!


Backwards is useful to set the animated element off-screen before the animation starts (during the animation-delay time). Then when the animation starts, it animates from off-screen to its final position.

Here is a codepen to demonstrate: http://codepen.io/StevenWhyte/pen/OVmwYL

1 Like

Very nice use case. Thanks!

Thanks for putting this article together! I really needed those interactive demo’s to understand what animation-fill-mode meant. I just got completely lost trying to decipher it from text definitions alone.

I love CSS animation. I didn’t know about animation-fill-mode though so I was using javascript with timout delays to add classes that would lock the elements into place. Using animation fill mode to do it is going to be soooooo much easier!

The section about animation-fill-mode: backwards; is still a bit difficult to understand. I get it now but the thing that tripped me up was that I was expecting the ball to start blue before you even clicked the button.
I think the simplest way to explain animation-fill-mode: backwards; would be:
“During the delay at the beginning of an animation, it styles the element with the styles of the first keyframe in the animation”

Oh and one more thing. There is a typo in the expanded version of the example code. You said “animation-mame” instead of “animation-name”.

Thanks for spotting that typo! Fixed.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.