From the course: CSS: Animation

Unlock this course with a free trial

Join today to access over 25,500 courses taught by industry experts.

animation-direction

animation-direction - CSS Tutorial

From the course: CSS: Animation

Start my 1-month free trial Buy for my team

animation-direction

“

- [Instructor] We've been talking about the various properties outside of the keyframe definition that we can use to change how an animation looks. One of those properties that can be especially useful for this is animation-direction. Animation-direction lets us manipulate what order our keyframes are executed in, and we have a few different values to choose from for this property. We can set the animation-direction to normal, which is default or reverse or alternate or alternate-reverse. Animation-direction is easiest to demonstrate by animating position, like the animation we're looking at here. But now that this property can be applied with any CSS keyframe animations, not just one's animating position. Right now, we've got our robot moving across the screen from left to right using this set of keyframes. You might notice the lack of a 0% keyframe here. That's a handy trick you can use when you want an object 0%…

Contents