The offset-path CSS property defines a movement path for an element to follow during animation.
- •Offset-path was formerly known as motion-path and is being renamed to offset-* in the CSS specification.
- •SVG path syntax is used to define movement paths, for example: path("M 5 5 m -4, 0 a 4,4 0 1,0 8,0...")
- •The actual animation is created using offset-distance (or motion-offset) combined with @keyframes animation rules.
- •The offset-rotate property controls the rotation direction of elements as they follow the path (auto, reverse, or specific degree values).
- •Currently, only path() and none values are reliably supported; other values like shape(), url(), and circle() remain unimplemented.
This summary was automatically generated by AI based on the original article and may not be fully accurate.
CSS-Tricks
Cloudflare