/* Offset position */ offset: auto; offset: 10px 30px; offset: none;  /* Offset path */ offset: ray(45deg closest-side); offset: path('M 100 100 L 300 100 L 200 300 z'); offset: url(arc.svg);  /* Offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg;  /* Including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px;  /* Global values */ offset: inherit; offset: initial; offset: revert; offset: unset; 

offset

The offset CSS shorthand property sets all the properties required for animating an element along a defined path.

Note: Early versions of the spec called this property motion.

Constituent properties

This property is a shorthand for the following CSS properties:

Syntax

/* Offset position */ offset: auto; offset: 10px 30px; offset: none;  /* Offset path */ offset: ray(45deg closest-side); offset: path('M 100 100 L 300 100 L 200 300 z'); offset: url(arc.svg);  /* Offset path with distance and/or rotation */ offset: url(circle.svg) 100px; offset: url(circle.svg) 40%; offset: url(circle.svg) 30deg; offset: url(circle.svg) 50px 20deg;  /* Including offset anchor */ offset: ray(45deg closest-side) / 40px 20px; offset: url(arc.svg) 2cm / 0.5cm 3cm; offset: url(arc.svg) 30deg / 50px 100px;  /* Global values */ offset: inherit; offset: initial; offset: revert; offset: unset; 

Formal definition

Formal syntax

[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

Examples

Animating an element along a path

<div id="offsetElement"></div> 

@keyframes move {   from {     offset-distance: 0%;   }    to {     offset-distance: 100%;   } }  #offsetElement {   width: 50px;   height: 50px;   background-color: blue;   offset: path("M 100 100 L 300 100 L 200 300 z") auto;   animation: move 3s linear infinite; } 

Specifications

See also

Last modified: Aug 12, 2021, by MDN contributors