January 4th, 2013
If you’ve been working with CSS animations a bit and are curious about animation-fill-modes, this little tutorial and screencast will fill you in on all the details.
Animation-fill-mode defines how styles are applied to the target of your CSS animations outside of the animation itself. By default your CSS animations won’t affect the element you’re animating until the first keyframe is “played”, then stops affecting it once the last keyframe has completed. This can leave you with some awkward jumps and cuts. It’s not pretty. You can use animation-fill-mode to smooth these out without having to write extra CSS to match your first or last keyframe styles.
Animation-fill-mode can be set to: none (default), forwards, backwards, or both. The values are a heck of a lot easier to remember when you see some examples.
CSS Animations: Using animation-fill-mode from val head on Vimeo.
A note on prefixes: I’m only using the -webkit vendor prefix in the screencast to save space and make things easier to follow. I’m sure you’ve been reminded a million times by now that you should include all the necessary vendor prefixes, via whichever method you prefer, for actual production work. Animations are 500% more awesome when they work in browsers made by multiple vendors :)
Forwards – An animation-fill-mode of forwards will extend the styles from the last keyframe of your animation to play beyond the duration of the animation. This is perfect if you want to animate something moving from one place to another and have it stay there.
/*using prefix free here so it's all nice and easier to read*/
body {margin:3em 10%; background:#737373;}
.ball {
animation-name: ballmove;
animation-duration: 2s;
animation-iteration-count:1;
animation-timing-function: ease-in-out;
animation-fill-mode:forwards;
}
@keyframes ballmove {
0% {transform: translateX(0) rotate(0);}
100% {transform: translateX(450px) rotate(2turn);}
}
Check it out on codepen
backwards – An animation-fill-mode of backwards will extend the styles from the first keyframe of your animation backwards into the duration of an animation delay you have set for the animation. If you want whatever you’re animating have the same styles that the animation will start with during a delay, backwards has you covered.
body {margin: 3em 10%; background:#737373;}
.ball {
animation-name: ballmove;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-delay:1s;
animation-fill-mode:backwards;
}
@keyframes ballmove {
0% {transform: translateX(100px) rotate(0);}
20% {transform: translateX(-10px)rotate(-.5turn);}
100% {transform:translateX(450px) rotate(2turn);}
}
Check it out on codepen
both – An animation-fill-mode of both combines the results of both backwards and forwards. The styles from your first keyframe will be used during any animation delay and the styles from your final keyframe will persist past the end of the animation.
/*using prefix free here so it's all nice and easier to read*/
body {margin:3em 10%; background:#737373;}
.ball {
animation-name: ballmove;
animation-duration: 2s;
animation-iteration-count:1;
animation-timing-function: ease-in-out;
animation-fill-mode:forwards;
}
@keyframes ballmove {
0% {transform: translateX(0) rotate(0);}
100% {transform: translateX(450px) rotate(2turn);}
}
Check it out on codepen
Val Head is a designer and consultant. She co-runs Web Design Day and Refresh Pittsburgh, contributes to .net magazine, and just released a video course on CSS animations.
Tutorial: Playing an animation on :hover with animation-play-state
3/11/2013
One Print A Month – February
3/2/2013
On Feeling Limited By Our Tools
3/1/2013
CSS Animations Course on Lynda.com!
2/15/2013
5 Comments
Fabrice Weinberg Says:
Great Screencast! Discovered the animation-fill-mode property recently and used it to perserve a :hover stat on an element.
codepen.io/FWeinb/pen/hcKCl
I just updated the CSS to point to this awesome explanation.
Fabrice.
January 7th, 2013 at 2:21 pm
Fitz Says:
Thank you for this, very very useful. I had issues with this before and wondered if there was a solution.
January 7th, 2013 at 3:17 pm
Binyamin Says:
You can use avoid animation 0% specification since it has no use codepen.io/laukstein/pen/sHuEC
January 16th, 2013 at 12:25 am
val Says:
Yes, that’s right. Your 0% keyframe can often be unnecessary because the animation will using the existing styles on an element as the 0% keyframe if you don’t specify one. I think it helps to see the 0% keyframe written out when you’re talking about fill modes so it’s obvious where those 0% keyframe styles are coming from. In practice leaving it out it totally acceptable though. Thanks for making a little demo of it too!
January 16th, 2013 at 10:42 am
Lea Verou Says:
Please note that you can avoid duplication another way too: Writing the CSS in the normal CSS rule and omitting the first or last keyframe so that they are automatically generated. Read more about this here: lea.verou.me/2012/12/animations-with-one-keyframe/
January 16th, 2013 at 3:58 pm