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.
CSS offset property also termed as motion is defined as to dictate the content position part and allows an element to define in a path. And it supports four common values like the top, left, bottom, right.
It defines a movement path for an element in the HTML during animation move. It makes use of Keyframes move for animating and the neglected values are set to their initial value.
It helps in specifying how far the element is offset from the given position like containing box edges.
Syntax
The general syntax of CSS Offset is given below:
Offset: path | rotate | distance | position | anchor;
This property is a shorthand for the following CSS properties:
/* 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;
Syntax
<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; }
Reference: