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
From the course: Interactive Animations with CSS and JavaScript
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Animation setup2m 27s
-
(Locked)
CSS @keyframes3m 21s
-
(Locked)
Easing2m 39s
-
(Locked)
Auto-advance with JavaScript2m 46s
-
(Locked)
Control animations with classes2m 27s
-
(Locked)
Animate visibility5m 7s
-
(Locked)
We need a montage1m 17s
-
(Locked)
Adding an animationend event handler5m 42s
-
(Locked)
Animating with CSS transitions5m 57s
-
(Locked)
Targeted animations using IDs3m 26s
-
(Locked)
Manipulating DOM with JavaScript3m 31s
-
(Locked)
Randomize slide displays7m 46s
-
(Locked)
Set timing for transitions3m 36s
-
(Locked)
-
-