Val Head - Designer, Consultant and Speaker.

Tutorial: Using animation-fill-mode In Your CSS Animations

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.

See some examples in action:

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 :)

The Cliff Notes Version:

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

11 Comments

Fabrice Weinberg Says:

Great Screencast! Discovered the animation-fill-mode property recently and used it to perserve a :hover stat on an element.

http://codepen.io/FWeinb/pen/hcKCl

I just updated the CSS to point to this awesome explanation.

Fabrice.

Fitz Says:

Thank you for this, very very useful. I had issues with this before and wondered if there was a solution.

Binyamin Says:

You can use avoid animation 0% specification since it has no use http://codepen.io/laukstein/pen/sHuEC

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!

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: http://lea.verou.me/2012/12/animations-with-one-keyframe/

Ben Frain Says:

Don’t usually point out typos Val but as it’s on your title I thought you might want to fix. You have ‘Using animation-fill-mode In You CSS Animations’ – presume this should be ‘Using animation-fill-mode In Your CSS Animations’? :)

Lailton Neves Says:

Thank you so much for this video! You saved my life!

Obrigado!

val Says:

Yes, that’s exactly what it’s supposed to be. Oops. Thanks for catching that :)

Ovi Says:

How can I make this work on hover, please?

valhead Says:

I’m not sure what you mean by that exactly. But if you’re looking to play an animation only on hover, the animation-play-state property might help: http://www.valhead.com/2013/03/11/animation-play-state/

Ovi Says:

Thank you!

Comments: