From the course: CSS: Animation

Unlock the full course today

Join today to access over 24,700 courses taught by industry experts.

Animating CSS motion path with offset-path

Animating CSS motion path with offset-path - CSS Tutorial

From the course: CSS: Animation

Animating CSS motion path with offset-path

- [Narrator] Now that we have our offset path assigned to our element, it's time to animate it. Just to recap, our robot is an image in our HTML and in our CSS we've assigned an offset path to our robot image. There are a few different properties that work along with the offset path property, but the two that are most useful for animation are the offset distance and the offset rotation. Offset distance represents how far along the offset path the element in question is, you can use this to place a number of elements spaced out along a particular path, or in our case, we'll use it to move an element along a path by animating it's offset distance value. I'll start by writing a set of key frames to animate that offset distance value. I'm going to call this set of key frames fly because that's kind of what the robot will be doing, and I'll start at the 0% key frame with an offset distance of 0%. So that is 0% of the way along…

Contents