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 compatibility

offset property

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset-path
Experimental
Chrome Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Edge No support NoFirefox Full support 63
Disabled
Full support 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.
IE No support NoOpera Full support 45
Full support 45
Full support 32
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Safari No support NoWebView Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Chrome Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Firefox Android Full support 63
Disabled
Full support 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.
Opera Android Full support 43
Full support 43
Full support 32
Alternate Name
Alternate Name Uses the non-standard name: motion-path
Safari iOS No support NoSamsung Internet Android Full support 6.0
Supports the path() function as a value
Experimental
Chrome Full support 64Edge No support NoFirefox Full support 63IE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Firefox Android Full support 63Opera Android Full support 47Safari iOS No support NoSamsung Internet Android ?
Supports the ray() function as a value
Experimental
Chrome Full support 64Edge No support NoFirefox Full support 71
Disabled
Full support 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.
IE No support NoOpera Full support 51Safari No support NoWebView Android Full support 64Chrome Android Full support 64Firefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.
Uses a non-standard name.
Uses a non-standard name.