From the course: CSS: Scrolling and Parallax
Unlock this course with a free trial
Join today to access over 22,600 courses taught by industry experts.
Sequencing animations - CSS Tutorial
From the course: CSS: Scrolling and Parallax
Sequencing animations
- [Instructor] So I want to show you how to create an animation sequence using key frames. To do that, I'm going to need to get a icon from the Font Awesome library, which I've already installed in our HTML right here. So in Font Awesome, there is a pretty cool search section and I can type in, or I've typed the keyword Chevron here, and that's going to show you all of the Chevrons. I need the one that points down. So I'm going to click on that and then I'll get this bunch of code and I can copy the HTML that I need right here. So I'm going to switch back here into this header section and right before this closing section part, I'm going to type in a new div here with a few classes. So this is going to have header cue, which is my own class. And then I'm going to make the background white. I'm going to center the text. I will make sure that the width of this element is 100% and these are bootstrap classes that I'm using…
Contents
-
-
-
-
Working with the transform property4m 49s
-
(Locked)
Using transform properties7m 34s
-
(Locked)
Understanding transitions5m 4s
-
(Locked)
Using transitions to animate4m 57s
-
(Locked)
The animation property3m 45s
-
(Locked)
Creating keyframes for animation6m 27s
-
(Locked)
Magic keyframes6m 5s
-
(Locked)
Sequencing animations9m 11s
-
-
-
-
-
-