From the course: CSS: Animation
Join today to access over 24,400 courses taught by industry experts.
Chaining multiple keyframe animations - CSS Tutorial
From the course: CSS: Animation
Chaining multiple keyframe animations
- [Tutor] So far, we've been creating mostly individual animations to create our effects, but in practice, you might want to combine multiple animations to create the overall movement you're going for. In this video, we'll be adding to our up and over text animation and we'll create one more set of key frames to handle the over part of the up and over motion. And the letters will end up hanging upside down. Our HTML and CSS are the same as we left them in the last video. So let's head straight to our CSS to add in the second set of key frames for us to use. For this set of key frames, I want the letters to flip down towards me, so they end up upside down. That's going to be a rotation on the X axis of negative 180 degrees. So I'll start this new set of key frames. I'm going to call it flipDown. And since we'll be using this set of key frames to pick up right where the last set of key frames left off, we can skip…
Download courses and learn on the go
Watch courses on your mobile device without an internet connection. Download courses using your iOS or Android LinkedIn Learning app.
Contents
-
-
-
-
-
Infinitely looping animations3m 58s
-
(Locked)
Pause and play with animation-play-state3m 16s
-
(Locked)
Animating 3D transforms5m 24s
-
(Locked)
Chaining multiple keyframe animations4m 48s
-
(Locked)
Challenge: Adding a third animation to the chain33s
-
(Locked)
Solution: Adding a third animation to the chain2m 16s
-
-
-
-
-