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!

2 Likes

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!
:smiley:

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.