offset-path
Defines the actual path an element should follow during a motion animation. You can use SVG path strings, shapes (like circles), or даже browser curves.
Quick example
.flying-bird {
/* Tells the element to follow a curved path */
offset-path: path('M 10 10 C 20 20, 40 20, 50 10');
}Quick facts
Initial value
noneInherited
No
Applies to
transformable elements
Animation type
byComputedValueType
Values
none offset-path Browser Support
Widely available Since 2022 95% global usage
This feature is well established and works across many devices and browser versions. It has been available across browsers since 2022.
Safe to use without fallbacks.
55+
72+
15.4+
79+