From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Animation setup
From the course: Interactive Animations with CSS and JavaScript
Animation setup
- [Instructor] Now that we have a mechanism in place for going from one slide to the next, let's go ahead and start working on our animation. I want to animate the difference between this first slide and the second slide, where the circle gets larger and everything else gets smaller. So the way we're gonna do that is we're gonna come back into our code and go back to our page. Now, the way I'm going to style this, once again, the HTML is kind of the bones of things, so I'm gonna signal through the use of classes that the chooser is now in the chosen state, and now, this is kinda semantic, but this is the same way I would design this app if it was an actual active component. So I'm gonna say now the chooser is in the chosen state using a class, and I'm gonna select one of these images and I'm gonna add a class to it, as well, and I'll say it's chosen. Now, the reason I have to duplicate this, the reason I have a chosen class on the child and on the chooser, is because in CSS, to…
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
-
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)
-
-