CSS keyframe animation fundamentals - CSS Tutorial

- [Narrator] Let's get started with some CSS keyframe animation. In this lesson, we'll create a simple animation of tech scaling up into view with a little bit of an overshoot to demonstrate the main components of CSS keyframe animations. The HTML behind our example is pretty straightforward. Our text is in H2 sitting within our container div. If we move to our CSS file, we have some text sizing rules and some basic positioning going on, and that's about it. So let's start adding some animation. There are two main parts to any CSS animation. We need to define the animation keyframes in the @keyframes rule, and then we need to assign those keyframes to a specific element or elements. You can do these two steps in any order, but I prefer to define the animation first and then assign it to something. So moving to our CSS file, we'll start by creating our CSS animation by defining its keyframes using the @keyframes rule. And we'll give this animation a name because otherwise we won't be able to assign it later, and we'll call this one scaleIn because that's essentially the effect we're creating. Once we have our @keyframes block, we define the values for the animating properties at various points during the animation. Any property that you want to have changed over the course of one cycle of the animation needs to be listed in your keyframes. There are multiple options available for how to define the keyframes within your @keyframes rule. We can use key words like to and from for keyframe animations that are animating only between two states, but in my case I'm going to use percentages to define my keyframes for maximum flexibility. The 0% keyframe or the "from" keyframe represents the start of the animation and the 100% keyframe or the "to" keyframe represents the end state of the animation. And we can use percentage values in between to define as many additional stages of the animation as we want along the way. So I'm going to start our text at a small size, say 20% of its full size or a scale of 0.2 for our 0% keyframe. For this effect, I know I want it to grow to be a bit oversized before it animates back to its intrinsic size to give it a bit of that overshoot feel. So we'll add a scale of 1.1 or 110% of the given size at the 85% keyframe. And then, at the end of the animation I want things to go back to their given size or a scale of one, so that will be our 100% keyframe. And that completes our @keyframes block. But if we previewed our file right now, nothing would happen. There would be no animation to see. We've defined the keyframes for our animation but we still need to assign it to a specific element in order to see it in action. To assign an animation to an element, we give that element some additional CSS properties. So in this case, that's our H2. The first one we'll need to define is the animation name and we'll set this to be the same thing we called our keyframe block. And this is essentially saying to our H2, hey, use this specific set of keyframes, the one we called scaleIn. The second property we absolutely have to add is animation duration. Our keyframe block defines what will change over the course of the animation but we need to tell it how long to take as well. So let's set this to two seconds. Now when we preview our file we see some animation happening. We've just set the minimum needed to create a CSS keyframe animation. We've got the keyframes, we assigned it to an element and we set a duration. So now we've completed our first CSS keyframe animation, our title scales up with a bit of an overshoot and it's looking pretty neat. Next, we'll look at some additional properties that let us fine tune our animations for even more control over the effect.