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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
offset-path | Chrome
Full support
55
| Edge
Full support
79
| Firefox
Full support
72
| IE No support No | Opera
Full support
45
| Safari No support No | WebView Android
Full support
55
| Chrome Android
Full support
55
| Firefox Android
Full support
63
| Opera Android
Full support
43
| Safari iOS No support No | Samsung Internet Android
Full support
6.0
|
Supports the path() function as a value | Chrome Full support 64 | Edge Full support 79 | Firefox Full support 63 | IE No support No | Opera Full support 51 | Safari No support No | WebView Android Full support 64 | Chrome Android Full support 64 | Firefox Android Full support 63 | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
Supports the ray() function as a value | Chrome Full support 64 | Edge Full support 79 | Firefox
Full support
71
| IE No support No | Opera Full support 51 | Safari No support No | WebView Android Full support 64 | Chrome Android Full support 64 | Firefox Android No support No | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.
- Uses a non-standard name.
- Uses a non-standard name.