CSS offset-path Property

❮ Prev Next ❯

The offset-path CSS property is used to specify a movement path for an element to follow and defines the element's position.

The position on the path is determined by the offset-distance property.

In the earlier versions of the specification, the name of offset-path was ''motion-path''. However, it was changed to offset-path as the property specifies static positions.

The offset-path property is not animated, it just defines the path for animation.

This offset property is an experimental technology.

If you have defined offset-path in CSS, you can use JavaScript to control the animation.

Initial Value	none
Applies to	Transformable elements.
Inherited	No.
Animatable	Yes.
Version	Motion Path Module Level 1
DOM Syntax	object.style.offsetPath = "ray()";

Syntax

offset-path: none | ray() | path() | <url> | <basic-shape>;

Example of the offset-path property with the offset-rotate and animation properties:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #ccc;
      }
      .mover {
        width: 70px;
        height: 70px;
        background: linear-gradient(#8ebf42 50%, #1c87c9 50%);
        position: absolute;
        left: 30%;
        top: 100px;
        offset-path: path("M18.45,58.46s52.87-70.07,101.25-.75,101.75-6.23,101.75-6.23S246.38,5.59,165.33,9.08s-15,71.57-94.51,74.56S18.45,58.46,18.45,58.46Z");
        offset-rotate: reverse;
        animation: move 3s linear infinite;
      }
      @keyframes move {
        100% {
          offset-distance: 100%;
        }
      }
    </style>
    <body>
      <h2>Offset-path property example</h2>
      <div class="mover"></div>
    </body>
</html>

Try it Yourself »

Example of the offset-path property:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        background-color: #666;
      }
      .item {
        width: 100px;
        height: 40px;
        offset-position: 0% 0%;
        offset-path: path('m 100 50 h 150 v 150');
      }
      #box1 {
        background-color: #8ebf42;
        offset-distance: -280%;
      }
      #box2 {
        background-color: #1c87c9;
        offset-distance: 190%;
      }
    </style>
    <body>
      <div class="item" id="box1"></div>
      <div class="item" id="box2"></div>
    </body>
</html>

Try it Yourself »

Values

Value	Description
none	No motion path is specified. This is the default value of this property.
ray()	A line segment which starts from the position of the box and proceeds in the direction defined by the specified angle.
url()	References the ID of an SVG element to be used as a movement path.
<basic-shape>	Specifies a shape which includes: circle(), ellipse(), inset(), polygon(), or path().
initial	Makes the property use its default value.
inherit	Inherits the property from its parents element.