- In the last tutorial, we animated our robot sliding across the screen. That's a great start, but it's still pretty basic. Lucky for us, there are some additional animation properties that give us a deeper level of control over the animations we create. In this tutorial, we're going to take a look at the animation-delay and animation-fill-mode properties and see how they can help us do more with our keyframe animations. Then we'll apply them to our robot animation to make it look just a little bit more polished. To demonstrate these two properties, I set up a rolling ball animation, and this is what it looks like to start out.
The CSS behind our ball animation looks a lot like our robot animation with just a couple of key differences. The main difference is that it has an animation-delay set and this animation-delay of one second means that it will wait one second before the animation actually executes. It also has more than two keyframes defining its animation. The animation it's using is right down here and it has three keyframes. These keyframes are also defined in percentages, which is the other option we have for defining our keyframes. Previously on our robot, we used from and to and this time, we're using percentages.
You can even mix these two if you'd like using both the keywords and the percentages, but personally, I find that a little confusing, so I like to stick to one or the other. When we view the ball animation in our browser, two things jump out as not quite looking right. First, the ball stays off to the far left for the one second of the delay and then it kind of jumps to its first position before it starts rolling around. That's a bit strange. And second, the ball snaps back all the way to the left when the animation is over. Probably not what we want. animation-fill-mode can help us fix both of those issues.
animation-fill-mode is a way of telling the animating element what to do outside of the actual duration of its animation and it can take four values: none, backwards, forward, and both. The default value is none if you don't declare the property at all, and if we go back to Sublime, we can see that's what's happening with our ball animation. We have no animation-fill-mode property set. If we explicitly set the animation-fill-mode to forwards, we'll see how that will alter our ball animation. Now when we preview our ball, we'll see it behaves differently at the end.
At the end of the animation, it stays all the way to the right. The styles from our last executed keyframe have been extended beyond the animation. That's what animation-fill-mode forwards does. So we fixed half the problem here. Let's go back and take a look at what animation-fill-mode backwards can do for us. So we'll go back to our CSS and change the animation-fill-mode to backwards. We'll save that and go back to our ball to see how it's changed. So this time with the animation-fill-mode of backwards, we got rid of the strange jump at the beginning.
Now the ball sits and waits with the first keyframe styles during that one second delay. Behind the scenes, the ball takes on the styles from that first zero percent keyframe that we define and holds those styles during the delay before the animation starts. Of course we still got that jump at the end of the animation since we removed the animation-fill-mode of forwards. That's where the animation-fill-mode of both comes in handy. It lets us take advantage of both the forwards and backwards animation-fill-modes behavior. So let's go back to Sublime and add that instead.
We'll change our animation-fill-mode to both and go back and preview our ball animation. And now, when we preview our ball animation one last time, things are looking a whole lot better. Our animation stays at the zero percent keyframe position during that one second animation delay at the beginning and once the animation completes, our ball keeps the styles from the final keyframe as well. That's exactly what we want to have happen. And that's animation-fill-mode both. It takes advantage of both the behaviors of forwards and backwards.
Now that we've looked at animation-fill-mode and animation-delay, let's go back to our robot to see how they can help us out there. We'll go back to Sublime and open up the CSS for our robot. It's looking exactly how we left it. Let's add a short animation-delay to our robot animation so it doesn't start immediately when the page loads. And we'll add a delay of two seconds. That should do. And let's also add an animation-fill-mode of forwards so our robot stays on the right side of the screen when the animation has completed.
With those two properties added, let's go back to our browser and see how our robot looks now. When we refresh, we'll see our robot waits in position until that two-second delay is up and then it slides over to the right side of the screen where it stays there, thanks to the animation-fill-mode. Just to quickly recap how animation-fill-mode works, the animation-fill-mode of backwards takes effect before the animation starts and it applies the styles from the first executed keyframe during any animation-delay. The animation-fill-mode of forwards applies the stylings from the last executed keyframe of your animation after the animation has completed.
And the animation-fill-mode of both gives you both behaviors. So that's how animation-fill-mode can really round out your animation and create behaviors that are probably a lot more like what you're looking for.
Web designer Val Head introduces CSS transforms and transitions—the foundation of most CSS animations—and shows how to keyframe simple animations and adjust their timing, fill, and direction. She also covers looping and chaining animations, animating HTML and SVG elements, and optimizing animation performance, and introduces the best tools and use cases for CSS animation. Start watching to get your brand in motion.
- Using CSS transforms and transitions
- Working with animation-delay and animation-fill-mode
- Timing and easing CSS animations
- Animating elements in place
- Animating sprite images
- Animating CSS transforms and transitions
- Chaining multiple animations
- Animating SVG images
- Creating high-performance CSS animations