CSS - offset-distance Property

An element's location along a offset-path is determined by its offset-distance CSS property, which specifies where it should be positioned.

Possible Value

  • <length-percentage> - The distance an element travels along a specific path is indicated by the length given by the offset-distance attribute.

    It reflects the whole length of the route specified by offset-path when set to 100%.

Applies to

Transformable elements

Syntax

offset-distance = <length-percentage>

CSS offset-distance - Percentage Value

The following example demonstrates the usage of offset-distance property.

       
<html>
<head>
<style>
   #offset-shape {
      offset-path: path("M 10 80 Q 95 10 180 80 T 310 80");
      animation: move 4000ms infinite linear;
      width: 60px;
      height: 40px;
      background: #FFD700;
      border-radius: 50%; 
      position: relative;
   }
   @keyframes move {
      0% {
         offset-distance: 0%;
      }
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
<div id="offset-shape"></div>
</body>
</html>

CSS offset-distance - With Two Elements

The following example demonstrates the usage of offset-distance property.

           
<html>
<head>
<style>
   .offset-shape {
      width: 60px;
      height: 60px;
      border-radius: 25%; 
      position: absolute;
   }
   #shape1 {
      offset-path: path("M 20 80 Q 80 10 320 80 T 620 80");
      animation: move1 6000ms infinite linear;
      background: #2715cf; 
   }
   #shape2 {
      offset-path: path("M 50 10 L 320 90 L 10 90 Z");
      animation: move2 4500ms infinite alternate ease-in-out;
      background: #cf159a; 
   }
      @keyframes move1 {
         0% {
            offset-distance: 0%;
         }
         100% {
            offset-distance: 100%;
         }
      }
      @keyframes move2 {
         0% {
            offset-distance: 0%;
         }
         100% {
            offset-distance: 100%;
         }
      }
</style>
</head>
<body>
<div id="shape1" class="offset-shape"></div>
<div id="shape2" class="offset-shape"></div>
</body>
</html>
Advertisements