Animation in CSS is pretty simple. It involves creating a keyframe-based sequence of changes and then applying it to a CSS rule. Take a look.
- [Instructor] Animation can be one of those tricky questions during an interview, 'cause a lot of designers and front-end developers sort of put this off, and it can be a little bit tricky, even though it starts out pretty easily. So it involves creating a keyframe-based sequence of changes, and then applying it to a CSS rule. So let's take a look at how that works. Now unlike more CSS rules, animation takes place in two parts. First is the definition of the structure of the animation. To do that we use the @keyframes @rule.
Now this is similar to, and related to media queries. So whenever you have a definition that starts with this keyword @ sign right here, that is called an @rule, and in this case, we're using this keyword keyframes. So the way that we define a sequence first is by creating this @keyword right here with keyframes, and then giving the animation a name. This can be whatever you want here. So it doesn't matter what you call this, but you will be using this later. So once you do that, notice that it is a compound rule, which means that it has two sets of curly braces.
One for the entire definition right here, just like a media query, and then we have a series of sub-definitions underneath that animation. And clearly, what you can see here is that we're defining an animation that, at the beginning, or at 0% of the animation, it does something, in this case, sets the opacity of the element to one. And then, when the sequence ends at 100% of the animation sequence, then we're setting the opacity to zero.
So actually, this one, didn't really need to have this opacity: 1; if the element already has an opacity of one. But just as easily, we could do something else and set up something to happen at 50%, and perhaps the animation here will be at 0.9. So in this case, from zero to 50%, the opacity isn't going to change that much. And then from 50% of the animation to 100%, it will make the change from 0.9 to zero. Now if you're only doing a beginning and an end, you can use two special keywords here.
So you can actually say from and to, if you want to, right here, if that's all you're doing, or you can use the percentages. Now the next part of using an animation is applying this sequence to some element in your code. So it has a bunch of different options that you can use here. So you can see all the names that you can control the animation with. The most important, though, is this first one, animation-name, and what you do there is you apply that as a property to any other piece of CSS you have, and then, you make a reference to the animation that you created, the set of keyframes that we just looked at.
And then, in addition to that, of course, you can specify things like the duration, how long the animation is going to take, in other words, the timing function. You can do things like slow it down at the beginning or at the end, and then you can set up an animation delay so it waits before it applies the animation, and all these other things right here. There's also a combo rule that is just called animation, so a lot of CSS rules will have sort of a generic combo and specific sort of rules for each of the properties, and that happens in animation.
So we have what happens at the beginning here, and at the end here. And just like in the example, we're using opacity here, but in addition to that, we have also a transformation. And transformations are pretty common when you're working with animations, because they're an easy way that you can modify the properties of elements. So what we can do here is a translation, which is a move from left to right. So at the end of this animation, this is going to be over here at the end.
And then we are also going to do a rotation that starts off sort of normal, just with zero degrees of rotation, and then at the end, 360 degrees. And so now, what we have here is this sort of definition for the element, which is the image. We gave this a class of my target. And it's just sort of defining the element. It's not applying the animation by default right now. So you can see that I also have something here with the animation sequence.
So this is a separate class. And so to assign this animation, we can actually do it in a couple of ways. We can actually add the additional class here, of myAnimation, and then that animation will play. Or we can apply the animation, so grab all of these rules, and then insert 'em into our main class. I'm going to delete this right now, so that it doesn't do that. So what we have here is a series of animation properties.
You see animation name, which ties this into our keyframes. And then you can control how long an animation plays, so you can modify this to be something like one second, three seconds, whatever you want it to do here. You can do seconds, or also milliseconds, so 1,000 milliseconds would be a second. And if you want to have a little more fine grain control, milliseconds is a little bit of a better measurement. There's also options here to control the timing function.
Normally, animations are sort of a monotonous sort of series of events. With the timing functions, you can do things like slow it down at the end. So you can do like ease in, ease out, ease in and out, and the way that I like to think of these is I like to think of the word ease as the word slow, and in and out become beginning and end. So, ease out would be slow at the end. It makes it a little bit easier for me to think of. And then you have an animation delay, which essentially says, when do you want me to start playing the animation? Animation delay of zero is the default.
So just like with any other property, the animation sequence gets a bunch of different events. And we can actually tack on events to an element, which I've done here, so that when I click on this item, it's going to add the animation function. So let's go back actually, and take off the delay, 'cause it waits three seconds before applying it now. So when I do that, you'll notice that, when I click on this element, which I'm targeting with query selector here, then it's going to add the class of myAnimation to the list of classes for this element.
So this'll ask me to create the animation in a more dynamic way. So the second thing that I can do here is actually listen for events. So I can do things, for example, when the animation begins, or when the animation ends. You'll notice that when I add this myAnimation class here, the animation plays, and then it automatically goes away. So what's happening here is that I'm actually listening for when the animation ends, and setting the display of that element to be nothing.
That's actually great, because I want that element not to stay on screen after the animation is done playing. And if I take this out, you'll notice that, normally the animation would play, but then it would reset all the properties of the animation. So since this object has an opacity of one, this object would exist on screen unless I do something when the animation ends. And that's why I have this code right here, so that the animation can play, but then, when it detects that the animation has finished, then I can actually hide the element, so that it's no longer in the DOM.
Now here's some pages where you can get more information about working with animations, including a couple of great courses that we have on these techniques. And as usual, if you have some ideas for this weekly series, and maybe you want to share with me some questions you've been asked, or have asked in interviews, connect with me in LinkedIn, or just about any other social media network, like Twitter or GitHub, at Planet of the Web.
Skill Level Intermediate
Q: Why can't I earn a Certificate of Completion for this course?
A: We publish a new tutorial or tutorials for this course on a regular basis. We are unable to offer a Certificate of Completion because it is an ever-evolving course that is not designed to be completed. Check back often for new movies.