Motion Path (offset-path)

Motion Path (offset-path)

Move an element along a DEFINED path, a curved track, using pure CSS.

The basics

.plane {
  offset-path: path("M 10 300 L 200 100 L 400 300");
  animation: fly 4s linear infinite alternate;
}
@keyframes fly {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

Core properties

• offset-path: the route (path() or a shape).
• offset-distance: how far along (0-100%).
• offset-rotate: auto-orient the element.

A curved flight

.ball {
  offset-path: path("M 50 300 Q 300 50 550 300");
  animation: roll 3s infinite;
}
@keyframes roll {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}

TL;DR

• offset-path defines a travel route.
• Animate offset-distance to move along it.
• offset-rotate spins it to face travel direction.
• Pure CSS motion for cool animations.