From the course: Interactive Animations with CSS and JavaScript

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

CSS @keyframes

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…

Contents