From the course: Interactive Animations with CSS and JavaScript
Unlock the full course today
Join today to access over 22,700 courses taught by industry experts or purchase this course individually.
Set timing for transitions
From the course: Interactive Animations with CSS and JavaScript
Set timing for transitions
- [Instructor] So we have our showLearning function implemented so we can display a random image and the correct tag, whether it's yes or no, depending on the circle being present or not, so let's go ahead and implement the actual montage code that's going to call showLearning over and over again and, once again, I want it to happen on an accelerating basis, I want the time out between each of these slides to get shorter and shorter so that it shows the computer learning something very quickly, is the goal to display. So let's go back to our code, and we're going to now, in runLearningSequence, instead of calling showLearning directly, we're gonna call a different function, the new function is called startLearning. So we're gonna startLearning, and we're gonna pass in an initial timeout, and we're gonna do it in milliseconds, so we're gonna say 1500 milliseconds. And now let's go up here and we'll create our new function with learningDelay. So, what startLearning does is it calls…
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)
-
-