X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS offset-path Property

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''.

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

This offset property is an experimental technology.

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

<!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>

Another example with the offset-path property:

Example

<!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>

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.

Browser support

55.0+ x 63.0+ x 45.0+

Practice Your Knowledge

Which statement below is incorrect about offset-path property?



Do you find this helpful?

Related articles