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.
It is documented as part of the Motion Path specification.
Syntax
/* Usage Example */
.flying-bird {
/* Tells the element to follow a curved path */
offset-path: path(';M 10 10 C 20 20, 40 20, 50 10');
}
/* Syntax */
offset-path: none;
/* Global values */
offset-path: inherit;
offset-path: initial;
offset-path: revert;
offset-path: revert-layer;
offset-path: unset;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.
55+
72+
15.4+
79+
Your first month is free
Managed WordPress hosting for faster sites.
Learn more