CSS Animations & Transitions
Motion Paths
Position and animate an element along a path while controlling its rotation and distance. The lesson covers path geometry, offset distance, automatic rotation, anchor points, keyframe animation, basic shapes, and reduced motion.
CSS motion paths place an element along a geometric route. The path, progress along it, anchor point, and rotation are separate values that can be controlled independently.
Separating geometry from animation makes curved movement easier to maintain than a long series of translated keyframes. The same path can position a static label, animate a delivery marker, or coordinate several elements by giving each a different offset distance. This topic also connects with CSS Animations and CSS Transitions.
Define the path separately from progress
Example
css
.delivery-marker {
offset-path: path("M 20 120 C 100 20 220 20 300 120");
offset-distance: 0%;
offset-rotate: auto;
animation: travel 4s ease-in-out infinite alternate;
}
@keyframes travel {
to { offset-distance: 100%; }
}offset-path defines the route. offset-distance places the element along it. offset-anchor changes which point on the element sits on the path.
Use a basic shape when possible
Example
css
.orbiting {
offset-path: circle(6rem);
offset-rotate: 0deg;
}Motion Path Properties
| Property | Purpose | Example |
|---|---|---|
| offset-path | Defines the path an element follows. | offset-path: path("M0,0 C...") |
| offset-distance | Positions the element along the path. | offset-distance: 50% |
| offset-rotate | Controls rotation along the path. | offset-rotate: auto |
| offset-anchor | Sets the element point attached to the path. | offset-anchor: center |
Complete Example
Run the complete document below in the Try It editor. Resize the preview or interact with the controls where the example calls for it.
Complete runnable example
html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Motion Paths example</title>
<style>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 2rem;
font-family: system-ui, sans-serif;
line-height: 1.5;
}
main { max-width: 70rem; margin-inline: auto; }
article, section, aside, form, .card, .panel {
padding: 1rem;
border: 1px solid #cbd5e1;
border-radius: 0.6rem;
}
.delivery-marker {
offset-path: path("M 20 120 C 100 20 220 20 300 120");
offset-distance: 0%;
offset-rotate: auto;
animation: travel 4s ease-in-out infinite alternate;
}
@keyframes travel {
to { offset-distance: 100%; }
}
.orbiting {
offset-path: circle(6rem);
offset-rotate: 0deg;
}
</style>
</head>
<body>
<main style="position:relative;height:260px"><svg viewBox="0 0 320 160" aria-hidden="true" style="width:320px"><path d="M20 120C100 20 220 20 300 120" fill="none" stroke="#cbd5e1" stroke-width="4"/></svg><span class="delivery-marker" style="position:absolute;left:0;top:0;font-size:2rem">●</span></main>
</body>
</html>Browser Support
Feature | Chrome | Edge | Firefox | Safari |
|---|---|---|---|---|
| offset-path | 55 | 79 | 72 | 15.4 |
Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8. A partial-support note is included where it changes how the example behaves.
Notes
- Motion can explain change, but large or continuous movement can make an interface unusable. Provide a reduced-motion version that removes travel rather than merely speeding it up.
- Test the example with real content, keyboard input, browser zoom, and the narrowest layout your project supports.
- Use a fallback when the support table shows that one of your required browsers predates the feature.
Conclusion
Separate the path from progress, and always provide a calmer reduced-motion result.
Keep the route connected to a meaningful visual explanation and verify that the moving object does not cover text or controls. Under reduced motion, replace long travel with a state change such as a fade, highlight, or immediate final position.