Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

2.3 CSS3 Keyframes

Keyframes allow us more fine-tuned control over our CSS animations. In this lesson, I'll teach you the basics of CSS3 keyframes.

2.3 CSS3 Keyframes

In the previous lesson we started looking at the absolute basics of CSS3 animations. We looked at the transition property, and how we can use that to create animations by transitioning the value of whatever properties that we wanted to transition. For example, we transitioned the width and height as well as the left properties. Well in this lesson we are going to look at key frames, which allows us to fine tune our animations, and we can also create our own custom animations. Now, if you are not familiar with the idea of a key frame, you can think of it as an important point in time. Like for example, with an animation we have at least two key frames. We have one at the beginning of the animation, and then one at the end of the animation. But CSS allows us to define other key frames or other important points in time of an animation. So if we wanted to fine tune where an element is, or its size, or even the rotation of an element, we can do that with the key frames at rule. So @key frames. And then we need the name of our animation. Now, we're going to change what we are doing as far as the animation is concerned with out box. Currently, it just slides in and slides back out whenever we click on this box control link. Now, whenever it slides in, we're going to change it so that it still ends at a left position of zero, but it's going to go a little bit beyond zero, and then it´s going to animate back to zero. So it´s kind of going to have a little bounce, type of animation. But whenever we hide the box it´s just going to slide back, we´re not going to do anything special there. So we want to go back to our CSS, and we want to name this animation. So we have @keyframes and then whatever name we want this animation to be. Let's be specific. So this is going to be sliding in the box, so we can do slide-in or we can use camel casing, it doesn't matter as long as we are consistent with how we name our animations. So inside of this key frames @rule, we have our key frames. Now we can do this in two ways. We can use two special rules, one is called from which is the beginning of the animation. and then the other is called two which is, of course, the end of the animation or we can use percentages. Like, if we are at 0% then you know, that's at the beginning of the animation. If we're at 100% then we are at the end of the animation. Or we can mix those together. So we can have from and then we could have something at like 90%, so we can say at 90%, we want the element to be at a certain position. And then we can have to. So, these are going to be our key frames. We have the beginning and the end, and then we have one at 90%. We need to set the left property to -100px because this is the beginning key frame of the slide in animation. Although let's go ahead and change it to -200. Let's also change the size of the box to 200. That way we have something larger to see on screen. And then we want to set the final key frame, the to key frames left position to be simply zero. But at 90% we want left to be just a little bit beyond zero so that we have that bounce back type of animation. So let's say left is going to be five pixels. And that ought to be enough. Now because we are using this slide in an animation, we no longer need this transition property on our box class. So we can get rid of that. But we don't want to apply the animation to the box class because then that animation will execute whenever the page loads. In fact, we can just go ahead and do that. We set animation and then we use our animation name, slide-in, and then we need the duration. And that is going to be 0.3 of a second. That seems to work rather well. So if we go back to the browser and refresh, we're going to see that that animation automatically executes. And that's not what we want. Now, notice that the box disappears at the end of the animation. The reason is because it's going back to it's initial position of -200 pixels. So we want to tell it to use the final values in the to key frame at the end of the animation. We do that by saying forwards, that is the film mode that we need for this animation, that's going to take the left of zero and apply that to the element at the end of the animation. So, we can go back and refresh and then we see that the animation completes and we have the box visible on the screen. Now we can also see that little bounce back animation is working. But we don't want the animation on the box class instead we want that on box-show. We don't need to set the left here because that's automatically going to be done by our animation. So now we can go back, we can refresh, we can click on box control and then it slides in and bounces back. However, whenever we click on it again. It just disappears, there's no animation there. The reason is because we haven't defined an animation. It simply takes away that box-show class from the element, so everything resets back to the CSS properties of the box class. So we want a slide out animation. We can copy what we have for slide in and paste that. We need to change the name to slide out and then we essentially want to do the same thing but in reverse. But in this case we don't need a 90% we're just going to have to key frames. The beginning and the end. So, in this case, the from is going to be zero pixels, so we will change from to zero and then for the to key frame, that is the end of the animation, we want that to be -200 pixels. And now we just need to apply this slide-out animation in order to slide out the element. Now once again, we could use the animation property on our box class. We can use the slide-out animation here. But we're going to see the element slide out whenever we refresh the page, just like that. Because that animation is applied to that element. But, after that, everything just works as it should. But we don't want that initial animation. We want the box hidden by default, so instead of putting the animation property here on the box-class, we can define another class, simply called a box-hide. So let's do that. We will add that animation property to that class. And then we need to adjust our JavaScript because we are no longer just working with this box-show class. We need to incorporate box hide as well. So, let's start by doing things a little more correctly than what we did in the previous lesson. I'm going to create an immediately invoke function and I'm going to put this existing JavaScript Inside of that function. Let's also go ahead and retrieve this element so that we have that, that makes our code a little bit more efficient. Let's just call this boxEl = and then, document.getElementById. And then we will use this boxEl inside of this event handler. So we always want to tackle box show. But we only want to tackle box hide if the element has box-show or if it has box-hide, so we need an if statement. If boxEL.classList.contains box-show, I wonder if we could use the syntax of two classes. I'm not sure if we can, so I'm just going to take this the easy way, the way that I know that works. And let's do class list and then contains and box-hide. Then we want to toggle the box-hide class. So boxEl.classlist.toggle. And then box-hide. And that should be all that we need to do. So if we go back to the browser, let's refresh. If we click on the link, of course that animation works. If we click on it again, the slide out animation works. Let's trigger the animation a couple more times just to make sure that it does indeed work as it should, and it does. So, with our key frames, we were able to add our own custom animations to our CSS. And, of course, this is a very, very simple demonstration. You can get as complex as you want by creating your own animations. But as I said in the previous lesson, I don't want to spend a lot of time on the fundamentals of CSS3 animations. I want you to have an understanding of how they work so that in the next lesson when we start applying these animations to our angular applications, you have an idea of whats going on.

Back to the top