CSS motion path
The CSS motion path module 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
html
<div id="motion-demo"></div>
css
#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
Functions
Specifications
Specification |
---|
Motion Path Module Level 1 |