Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Understanding delay and fill-mode
- Dictating an animation's direction
- Using easing
- Adding keyframes
- Looping an animation
- Chaining multiple animations on one element
- Setting up the HTML structure
Skill Level Intermediate
In the last tutorial, we animated our unicycle rider across the screen. It was fun but pretty basic. Lucky for us, there are additional properties that give us a deeper level of control over our animations and let us give them a little more polish too. In this tutorial we'll look at properties like animation-delay and animation-fill-mode and how they can give us more control over how our unicycle rider moves. Right now our animation starts playing as soon as we load our page. What if we didn't want the animation to start playing right away? That's where the animation-delay property comes in handy. Let's go over to Coda to edit the CSS for this example.
And you can follow along with this example from the exercise files for this tutorial, or you can work with the files you created last time around. Either one will have you starting in the same place. So let's add an animation-delay to our unicycle rider animation. We'll add one additional property here called animation-delay, and we'll set that delay 2 seconds. That seems like a nice long enough time that we'll notice. So if we save our CSS now and go back and preview our animation in our browser, we'll refresh the page, and we will notice nothing happens for the first 2 seconds and then our animation executes just like it did before.
Now we've got a nice pause before the action of our animation starts. You might have also noticed that when our unicycle rider got to the end of the animation, he jumped back to his original position. I think I'd rather have him stay at the end off to the right when the animation completes the motion. To do this, we'll need to take a look at the animation-fill-mode property. Animation-fill-mode can take on one of four values, none, backwards, forwards, or both. Let's take a look at a couple of simple ball animations to demonstrate what animation fill mode can do. None is the value by default if you don't declare the property at all, just like this ball example here.
With the animation-fill-mode of none, it just hops back to its original position once the animation has finished. This default behavior is pretty awkward looking. When the animation is over, the target of the animation returns to its intrinsic styles and the animation styles no longer apply. That's not always what we really want to happen. If we go to Coda and look at the CSS behind this ball animation, we can make some adjustments to change how this looks. If we explicitly set our animation-fill-mode to forwards, our ball will maintain the styles from the last executed keyframe of the animation after the animation has finished.
In this case, that will mean our to keyframe which is the last one and the current animation we are using. So if we save our CSS now and go preview this animation once more with just that one property added, we'll refresh the page, and now we'll see that our ball stays at the end and maintains those styles from our last keyframe once the animation is complete. It's looking a lot better. Now let's take a look at the animation-fill-mode value of backwards. And to do that, I'm going to go back to Coda and just change the animation our ball is using to better demonstrate the behavior.
So edit our animation name assignment to take on the other animation we have in our file, the first one we have listed, called move-left-right. And you might notice that the keyframes for this animation are defined using percentages, which is our other option besides from and to. We'll be working with percentage keyframes later in this course as well. As you can probably guess, the reason we use percentage keyframes is that we can have more than just two. While the keywords from and to are really handy, they limit us to two keyframes, and sometimes we need more than that. So that's where percentages come into use.
With our animation changed, I'm also going to uncomment this animation delay and remove our fill-mode line for now, so we can see what happens with no fill-mode assigned. So we'll save the CSS and preview our ball animation now. When we refresh the page, you will notice there's a jump at the very beginning of our animation where the ball jumps to the 0% keyframe position and then there is another jump at the end. So we have just made this ball animation really, really awkward. Because during the delay it stays in one place then it jumps to the first keyframe of our animation, and then it jumps back when the animation is done.
So let's assign an animation-fill-mode of backwards. We'll save this and then preview to see how this changed things. So with the animation-fill-mode of backwards, our ball will take on the styles from our 0% keyframe, the first keyframe in our animation during that animation delay that we set. So if we go back to our browser and preview, you will see that our animation now starts in the 0% keyframe position, instead of its original position off to the left. Of course we are still getting that jump at the end of our animation, and that's where the animation-fill-mode of both comes in handy. So if we go back to Coda, we'll change this animation-fill-mode to both.
And then we'll preview our ball animation one last time. Things are looking a whole lot better. Our animation stays in the 0% keyframe position during the animation delay at the beginning. And then once the animation is over, it keeps the styles from our final keyframe as well. So that's the animation-fill-mode of both. It takes advantage of both the behaviors of forwards and backwards. So now that we looked at animation-fill-mode in detail, let's go back to our unicycle rider animation and see how it can help us out there. So we'll go back to Coda, and we'll open up the style sheet for our unicycle animation.
It's just how we left it off. We have our animation delay set of 2 seconds, and now let's add an animation-fill-mode property to really round out this animation. Just like the last ball example that we looked at, we have a delay, so we're definitely going to want to use the fill-mode of backwards. But we also want our unicycle rider to stay off to the right when it's done, which is technically the behavior of the animation fill-mode forwards. So I think we want to use the animation-fill-mode of both here so that way we can take advantage of the animation-fill-mode of both before the animation starts and after. So, with that one line changed, let's save our CSS and go back to look at our unicycle animation.
We'll refresh the page, you'll see we still have our delay. And the animation executes, and when it's done our animation stays right off to the right where we left it. So the animation-fill-mode of both and the delay have really added to this animation. Just to quickly recap how the animation-fill-mode works, the animation-fill-mode of backwards takes effect before the animation starts, and it applies the styling from the first executed keyframe during any animation delay. The animation-fill-mode of forwards applies styling 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 is 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.