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

Have a comment or question? Find me on twitter or email me.