W3cubDocs

/CSS

CSS Motion Path

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Motion Path is a CSS module that allows authors to animate any graphical object along a custom path.

The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With offset-path you can define a specific path of any shape you want. You then animate it along that path by animating offset-distance, and can choose to rotate it at any point using offset-rotate.

Basic example

<div id="motion-demo"></div>
#motion-demo {
  offset-path: path('M20,20 C20,100 200,0 200,100');
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

Reference

Properties

Specifications

Specification Status Comment
Motion Path Module Level 1 Working Draft Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

offset property

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
offset-path 55
55
46
Uses the non-standard name: motion-path
79
79
79
Uses the non-standard name: motion-path
72
72
63 — 72
Disabled
Disabled From version 63 until version 72 (exclusive): this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 45
45
32
Uses the non-standard name: motion-path
No
Supports the path() function as a value 64 79 63 No 51 No
Supports the ray() function as a value 64 79 71
Disabled
71
Disabled
Disabled From version 71: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No 51 No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
offset-path 55
55
46
Uses the non-standard name: motion-path
55
55
46
Uses the non-standard name: motion-path
63
Disabled
63
Disabled
Disabled From version 63: this feature is behind the layout.css.motion-path.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
43
43
32
Uses the non-standard name: motion-path
No 6.0
6.0
path() is the only value type supported.
5.0
Uses the non-standard name: motion-path
Supports the path() function as a value 64 64 63 47 No 9.0
Supports the ray() function as a value 64 64 No 47 No 9.0

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Motion_Path