From the course: Interactive Animations with CSS and JavaScript

CSS @keyframes

From the course: Interactive Animations with CSS and JavaScript

Start my 1-month free trial

CSS @keyframes

“

- [Instructor] Now that we got the styling on our second slide set up the way we want it, we have everything at the proper size, let's go back to our code and we're gonna add the animation. So the way the animation works is it changes the value of certain properties in CSS from the initial value to the final value. Now, the trick here is we've styled these particular elements with these final values in mind, so we're gonna end up with a chosen element being 30% of the size of the parent and all the unchosen elements at 16.6% of the parent. What we're gonna do is animate from their initial size, which is 20%. All of them are 20%. We're going to animate from 20%, and in the case of the chosen element to 30, and in the case of the unchosen elements to 16.6. So the way we set up an animation is we have to give it a name. So let's go to our chosen element styling here, and we're gonna add an animation name property. So animation-name will call chosen. I'm gonna give it a duration, and the duration, when I'm working on animations, particularly starting off, set these to be large. I'm gonna make it two seconds. So it's very clear that the animation is happening. You can kind of watch it happen as it goes. Later on, we can always make it a little shorter, so. And now we need to use a keyframe selector, which is a special CSS syntax for setting up keyframes. Now, keyframes, if you're not familiar with animation in general, you have a starting condition generally and then intermittent values you wanna hit and then a final value. It's a way to kind of control the pace of things happening. So right now we're gonna do a very simple set of keyframes. We're gonna have a start condition and an end condition and we're gonna take the default rate of change. So we're gonna go from max width 20%, which is where it initially starts at. I'm gonna go to a max width of 30% for the chosen element. So let's do that. Now we're gonna do the same template down here for the not chosen elements, but we're going to give it obviously different values. So we're gonna come down here and we're gonna say animation name in this case is unchosen, and the duration, two seconds. Now we'll create a keyframe for this, unchosen. And once again we're gonna animate from a max width of 20% to a max width of 16.6%. So let's save this off. Let's go back to the browser. Refresh. Now you notice one artifact here. When I click, the text at the bottom appears to move down because the size of this chooser is changing. The easiest fix to that is we're gonna give the chooser a fixed height. So let's go back to our code again. Let's go to the chooser. And here we have our chooser size. And we're going to give it a height of 20vmin, let's call it, 20% of the minimum dimension. And as long as we're at it, now that we've seen our animation work, let's go ahead and reduce that to half a second instead of two seconds. So I have to change that in two places. So I've saved all that off. I'm gonna refresh. Now let's see it go. All right. That's what we're looking for.

Contents