Intermediate LevelCSS & Modern Layouts
How does CSS offset-path (motion path) animate elements along a path?
❓ Interview Prompt: Explain offset-path, offset-distance, and animating elements along SVG-like curves.
CSS Motion Path moves elements along a defined path using the offset properties:
•
offset-path: Defines the path shape (SVG path string, ray, circle, etc.).•
offset-distance: Position along the path (0% = start, 100% = end).•
offset-rotate: How the element rotates to follow the path direction.Combined with @keyframes, elements can smoothly travel along custom curves.
Code Implementation Example
css
.moving-dot {
offset-path: path("M 0 200 Q 150 0 300 200 T 600 200");
offset-rotate: auto;
animation: moveAlongPath 3s ease-in-out infinite;
}
@keyframes moveAlongPath {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}💡Element animated along a bezier curve using offset-path.
🎯 Interview Key Takeaway
offset-path enables SVG-like path animations in pure CSS without JavaScript animation libraries.
#Motion Path#Animation#Advanced#Intermediate
Back to all CSS & Modern Layouts Questions→