CSS Motion Path

Overview

This is a module defining the offset-path property. It provides animatable motion paths using SVG Paths or basic shapes.

Formal Definition

Specifications

Motion Path Module Level 1 # offset-path-property

Syntax

/* Default */
 offset-path: none;
 /* Function values */
 offset-path: ray(45deg closest-side contain);
 /* URL */
 offset-path: url(#path);
 /* Shapes */
 offset-path: circle(50% at 25% 25%);
 offset-path: inset(50% 50% 50% 50%);
 offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
 offset-path: path('M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200');
 /* Geometry Boxes */
 offset-path: margin-box;
 offset-path: stroke-box;
 /* Global values */
 offset-path: inherit;
 offset-path: initial;
 offset-path: revert;
 offset-path: unset;

Code snippets

index.html

Source:index.html

Browser Compatibility