Viewers: in countries Watching now:
This course presents a short series of CSS animation techniques, such as looping, playing, and pausing, and puts them together in a small project: an animated infographic. Author Val Head also addresses using CSS preprocessors, adding transitions, handling vendor prefixes, and understanding the best uses for CSS animations. Plus, discover how to measure the performance and current level of browser support for CSS animations and how we can expect the technology to change.
For our first animation of this project, we'll animate the coffee cup in our header. This animation is a lot like the ones we've done previously in the course, so it's a good one to start with. Let's take a look at our final version first to get a feel for what we're creating. I'll just refresh the page and then we'll see after a short delay, our coffee cup slides into the middle of our frame. It holds there for a moment and then slides back out in the other direction. So that's the animation we'll be creating in this tutorial. If we go to Coda and just look at our HTML briefly, we'll see that these are the two images we'll be dealing with for this animation.
And that's our coffee cup image and the aperture image that's overlaying our coffee cup. In my initial CSS positioning, I placed the coffee cup below the aperture image, so that way it's showing up behind it. The reason you can see it when it's in the middle is our aperture image is actually transparent in the middle. So that's the kind of trick to this animation. The two images layered overtop and the top one is transparent in the middle. So let's go to our styles.css, and we'll head all the way to the bottom of the file and start our animation section. The first thing we're going to start with as usual to create our keyframe is our @keyframes blog.
I'm going to call this animation cup-in because it's the coffee cup moving in. That seems like it will work. Now we want our coffee cup to slide in somewhat fast and then stay in the middle and just kind of hold there for a little bit before it makes its exit. If you've ever worked with animation software like After Effects or similar, you might have called that a hold keyframe or a hold. There aren't really hold keyframes in CSS, but I'll show you how we can get the same idea. So let's start with the 0% keyframe, and we'll have a transform with a translate of 0, so that will start our coffee cup off exactly where it is right now.
At about 5%, because we want this animation at least the entrance to happen pretty quickly, let's add another transform and translate our coffee cup in to about 103 pixels. Now I've come up with these numbers just by adjusting things and playing it around it first, so that's why I'm guessing numbers like 103. I've actually checked this out before. Now we want our coffee cup to kind of hold in that middle at that 103 pixels position. And in order to do that, what we'll actually do is create another keyframe that's exactly the same as this 5% keyframe.
So I'm just going to copy this and paste it below and then set this to 80%. This might look a little bit strange to have a 0%, 5%, and 80% keyframe, where 5% and 80% are exactly the same. But essentially we're creating an animation with zero change, so our coffee cup will stay static in one position between 5% and 80%. That's a handy little trick. At the 90% keyframe, we want our coffee cup to leave the frame off to the right. So we're going to transform it again just a little further out.
We're going to translate it here to 240 pixels. That happens to be so far off to the right that our coffee cup image will be covered up by the opaque portion of our aperture image. Then one last keyframe we'll be adding is our 100% keyframe, and we're going to repeat this whole pattern again, because what we want is for our coffee cup to go over to the right and then stay there just for a little bit out of sight before it comes back in again. So we will once again do a repetitive keyframe and make our 100% keyframe the same position as our 90% to create a second sort of hold at the end of our animation.
Now the nice thing is with all these repetitive keyframes is we can actually make our keyframe notation a lot more compact by doing a couple of things. Since both our 5% and 80% keyframes are the same, we can actually notate this by a comma separating them. So adding 5%, 80% with one declaration means we can eliminate this 80% line here and then we can do the same for the 90% and 100%. We can add a comma, 100%, and then remove our 100% keyframe line. Now we've just done this animation with even fewer keyframes, and we don't had to repeat that over and over again.
And one other thing we can remove if we'd like to is when we have a 0% keyframe with a translation of nothing. That's essentially using the same styles that are already on our coffee cup, and if we delete this line, CSS will automatically take the existing styles in our coffee cup and make that into a 0% keyframe, even though we haven't explicitly stated that. So that's a nice little shortcut as well. With our keyframes in place, let's go and assign this animation to our coffee cup. I should probably fix that so we have the proper syntax. The semicolon should be outside of the brackets of my translate, because the semicolons are kind of like the end of the sentence when you've created your property, not in the middle of your sentence.
Our coffee cup is in our header and a div with a classic opening, and it has the classic cup. So we're just going to scroll up a little bit 'til we get there, and here we are. Opening cup is exactly the image we want to deal with. So we're going to add our animation properties here, and of course we're going to assign it, the cup-in animation that we just created. I'm going to have this animation take 10 seconds, because we want it to be kind of slow, it's going to repeat a lot. I'll set my animation- timing-function to ease-in. I'm going to have this repeat infinitely, and I'm also going to add a delay of 5 seconds, and we'll have our animation-fill-mode set to forwards.
So with that all in place, we can save our file and take a look at what we've created. We'll refresh the page. And then after a short, approximately 5-second delay, our coffee cup will slide in, it will hold there for a little bit, that's between our 5% and 80% keyframe, and then it will slide back out once it hits 80%, and there we go, and it will hold off to the right for just a short while and then come back and repeat. Now if you notice, our 5-second delay only occurred the first time the animation played. After that, the delay we're seeing is really just that fake delay we've created between our 90% and 100% keyframe.
So when infinitely repeating animations, the delay only takes place the first time. Next, we'll move on to animating the data section of our infographic.
There are currently no FAQs about CSS: Animations.
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.