CSS Tricks
CSS Trick ★ Featured

Motion Path Animation

Animate elements along custom curves and SVG paths without JavaScript.

#css #animation #svg #motion-path

Browser Support

✓ Chrome 55+ ✓ Firefox 72+ ✓ Safari 15.4+ ✗ Edge

Motion Path Animation

Move elements along custom paths using offset-path.

.element {
  offset-path: path("M0,50 Q150,0 300,50 T600,50");
  offset-distance: 0%;
  animation: move 3s linear infinite;
}


@keyframes move {
  to { offset-distance: 100%; }
}
PropertyPurpose
offset-pathThe route (SVG path or shape)
offset-distancePosition along path (0-100%)
offset-rotateElement rotation (use auto to follow curve)

Live Demo

Motion Path
ANIMATED
2.5s
12px
CSS Code
@keyframes motion-path-move {
0% { offset-distance: 0%; }
100% { offset-distance: 100%; }
}
.motion-path-container {
width: 100%;
max-width: 300px;
height: 80px;
position: relative;
}
.motion-path-track {
position: absolute;
width: 100%;
height: 100%;
}
.motion-path-track path {
stroke: rgba(139, 92, 246, 0.3);
stroke-width: 2;
fill: none;
stroke-dasharray: 4 4;
}
.motion-path-ball {
width: 12px;
height: 12px;
background: linear-gradient(135deg, #8b5cf6, #06b6d4);
border-radius: 50%;
position: absolute;
offset-path: path("M10,40 Q75,10 150,40 T290,40");
offset-rotate: 0deg;
animation: motion-path-move 2.5s linear infinite;
}

The element follows the curved path continuously using CSS motion path properties.

Share this CSS trick

Comments