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
.