Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There is one more animation property I'd like to explore here before we say goodbye to our unicycle rider animation, and that's the property of animation direction. Right now we've got our unicycle rider moving across the screen from left to right, but I think his act would be a lot more interesting if he at least changed direction. Animation direction is a property that can help us get a lot more mileage out of our animations without having to make any major changes to our keyframes. Specifically, animation direction lets us manipulate what order our keyframes are executed in. So far our animation has only played forwards, which has worked out pretty well, but we do have other options.
Animation direction can be set to normal, reverse, alternate, and alternate reverse. This sounds confusing, but they can really come in handy. An animation direction of normal means that all iterations of the animation will be played as specified. So your keyframes will play from start to end. From the first keyframe you defined to the last one. So, from your from keyframe to your to keyframe or your 0% to your 100%. The animation direction of reverse means that all iterations of your animations will be played in the reverse direction. So your last keyframe will play first and your first keyframe will play last.
So this would play from your to keyframe to your from keyframe or your 100% keyframe to your 0% keyframe. The two alternate versions get a little more complicated, but they're still pretty easy to follow. An animation direction of alternate means that the direction of your animation will alternate with each iteration of the animation. It will start playing in the normal direction so that would be 0% to 100% and the second time around it will play in reverse so that would be 100% to 0. And alternate reverse works the same way, but it starts playing your animation in reverse first and then normal.
Let's go back to our simple ball animation to show you what these do. They're a lot easier to see than to just talk about. So, let's look at our simple ball animation in the browser first to see what happens if we don't specify the animation direction. Normal is the default, and our animation will play forward through our list of keyframes. So if we refresh the page, we'll see our ball goes from left to right. To see what happens when we explicitly set our animation direction to something else, let's go look at the CSS behind this example, and you can find these examples in the exercise folder for this tutorial. So we'll explicitly add our animation direction property, and we'll set it to reverse.
If we save our CSS file now and go back to our browser and preview our ball animation once more, we'll reload the page, and you'll see this time our ball moves from right to left, which is actually going through our keyframes backwards. And just to verify, we'll go back to our CSS, and you will see that was playing our to keyframe to our from keyframe, which is the reverse order that we've actually listed them in, hence the name reverse. So the reverse animation direction plays a little like you were rewinding your animation. So if we go back up and change our animation direction property to alternate, we can see how this one works.
However, alternate can only be used if your animation has an iteration count of more than 1. Because the first time it plays, it will play forwards, and the second time it will play in reverse. So we'll have to make one other change to see this happen, and we'll go up here and change our animation iteration count to 2. That way it will actually have an iteration to alternate the direction on. Let's save our CSS and go back and see how our ball animation looks now. If we refresh our page, our ball animates twice, first in the normal direction and the second time in the reverse direction.
Alternate reverse works much the same as alternate. The only difference is it starts playing the animation in reverse first and then forwards. So if we save this and preview now, you'll see our animation plays in reverse first and then forwards, but it still plays twice, and it still alternates the direction. Now that we've seen all our options, let's go back to our unicycle rider animation and see how we could use animation direction to spice up his act a little bit. So we'll go back to Coda and pull up the CSS for our unicycle rider. I'd like to see him ride in both directions, so I'm going to set our animation direction to alternate.
That way he'll drive both forwards and backwards. Of course, we will also have to adjust our animation iteration count so that way there are two iterations in which to alternate our direction. So we'll go up here and change our animation iteration count to 2, and if we save our file and go back and preview our unicycle rider, we'll refresh the page, we'll see after our 2-second delay, he goes forwards and then backwards, reversing the animation direction just like we indicated. If you have a keen eye, you may have also noticed that our animation timing function was reversed when the direction was reversed. This is a nice built-in touch of CSS animations.
Now that our animation is looking how we'd like it, let's go back to our CSS and add one last step of adding our vendor prefixes. Now we have all our vendor prefixes in place, and we're ready to view this animation on non-WebKit browsers too. With these additional animation properties under your belt, you'll able to create even more interesting effects with your CSS animations without even having to add extra keyframes.
Get unlimited access to all courses for just $25/month.Become a member
58 Video lessons · 66340 Viewers
61 Video lessons · 96820 Viewers
56 Video lessons · 110516 Viewers
82 Video lessons · 105174 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.