offset-path

The offset-path property in CSS defines a movement path for an element to follow during animation. This property began life as motion-path . This, and all other related motion-* properties, are being renamed offset-* in the spec . We’re changing the names here in the almanac. If you want to use it right now, probably best to use both syntaxes. Here’s an example using the SVG path syntax: .thing-that-moves { /* "Old" syntax. Available in Blink browsers as of ~October 2015 */ motion-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); /* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */ offset-path: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"); } This property cannot be animated, rather it defines the path for animation. We use the offset-pat h property to create the animation. Here’s a simple example of animating motion-offset with a @keyframes animation: .thing-that-moves { offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0'); animation: move 3s linear infinite; } @keyframes move { 100% { motion-offset: 100%; /* Old */ offset-distance: 100%; /* New */ } } CodePen Embed Fallback In this demo, the orange circle is being animated along the offset-path we set in CSS. We actually drew that path in SVG with the exact same path() data, but that’s not necessary to get the motion. Say we drew a funky path like this in some SVG editing software: We would find a path like: The d attribute value is what we’re after, and we can move it straight to CSS and use it as the offset-path : CodePen Embed Fallback Note the unitless values in the path syntax. If you’re applying the CSS to an element within SVG, those coordinate values will use the coordinate system set up within that SVG’s viewBox . If you’re applying the motion to some other HTML element, those values will be pixels. Also note we used a graphic of a finger pointing to show how the element is automatically rotated so it kinda faces forward. You can control that w