CSS Motion Path
CSS Motion Path allows you to animate elements along a custom path (like a curve, circle, or complex SVG shape). This was previously only possible with SVG animations (SMIL) or JavaScript.
1. The Properties
The Motion Path module consists of several properties, usually prefixed with offset-.
offset-path
Defines the path the element should follow. It accepts the same path syntax as SVG paths or CSS shapes.
.element {
offset-path: path('M20,20 C20,100 200,0 200,100');
}offset-distance
Specifies the position of the element along the path. This is the property you animate.
0%: Start of the path.100%: End of the path.
@keyframes move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.element {
animation: move 3s linear infinite;
}offset-rotate
Defines the orientation of the element as it moves along the path.
auto(Default): The element rotates to follow the direction of the path.auto 180deg: Follows the path but rotated by 180 degrees.0deg: Fixed rotation (does not rotate with the path).
.element {
offset-rotate: auto 90deg; /* Like a car drifting sideways */
}offset-anchor
Specifies the point on the element that is fixed to the path. Similar to transform-origin.
auto(Default): Uses the value oftransform-origin.center,top left, etc.
2. Basic Example
.car {
width: 40px;
height: 20px;
background: red;
/* Define the path */
offset-path: path('M 10 10 H 280 V 280 H 10 Z');
/* Animate along the path */
animation: drive 4s linear infinite;
}programming/css/css programming/css/transitions-and-animations programming/css/css-shapes