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.

Creating keyframes for animation

Creating keyframes for animation - CSS Tutorial

From the course: CSS: Scrolling and Parallax

Start my 1-month free trial Buy for my team

Creating keyframes for animation

“

- [Instructor] Key frames, let you describe more complex animation sequences than transitions. You defined them with a special @key frames keyword, and then you give them a name so that you can recall them later. Now, inside that sequence, you create a series of one or more selectors that determines how the styles are animated between those different keyframes. So the selector can have a property from zero to 100 zero meaning at the beginning a hundred meaning at the end of the animation. And you can also have more than one of these selectors so you can specify position zero. What happens when the animation is at 33% of its sequence, and then also a 100%. You can also specify the key words from meaning 0% and to, which is the same as a 100%. So let's take a look at how these work, So I've got my normal sequence here, and I normally like to put all my key frames at the end so I'll use the @keyframes keyword here, and I'm…

Contents