CSS - offset-anchor Property

Quiz

The CSS property offset-anchor specifies the position inside an element's box that acts as the offset path(offset-path) movement's reference point.

The animation behavior of the element is controlled by this property, which is essential for defining which portion of the element travels along the route specified by offset-path.

Possible Values

auto - The offset-anchor property aligns an element's movement along an offset path.

It usually matches transform-origin unless offset-path is none, in which case it aligns with offset-position.
<position> - A <position> defines x/y coordinates, defined with one to four values, relative to the box borders of an element.

Observe that only background-position may use the three-value syntax.

Applies to

Transformable elements

Syntax

offset-anchor = auto | <position>

CSS offset-anchor - Basic Example

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

       
<html>
<head>
<style>
   div {
      offset-path: path("M 0,40 L 300,40");
      animation: move 4000ms infinite alternate ease-in-out;
      width: 80px;
      height: 80px;
      border-radius: 10%;
   }
   section {
      background-image: linear-gradient(
      to bottom,
      transparent,
      transparent 49%,
      #4CAF50 50%,
      #4CAF50 51%,
      transparent 52% );
      border: 2px solid #4CAF50;
      margin-bottom: 60px;
      width: 700px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .offset-anchor1 {
      offset-anchor: auto;
      background: #2196F3;
   }
   .offset-anchor2 {
      offset-anchor: bottom left;
      background: #FF9800;
   }
   .offset-anchor3 {
      offset-anchor: top right;
      background: #9C27B0;
   }
   @keyframes move {
      0% {
      offset-distance: 50%;
      }
      50% {
      offset-distance: 100%;
      }
   }
</style>
</head>
<body>
<section>
   <div class="offset-anchor1"></div>
</section>
<section>
   <div class="offset-anchor2"></div>
</section>
<section>
   <div class="offset-anchor3"></div>
</section>
</body>
</html>

CSS offset-anchor - Using different anchor values

The following example demonstrates the usage of offset-anchor property along with different anchor values.

<html>
<head>
<style>
   div {
      offset-path: path("M 0,60 Q 150,0 300,60");
      animation: move 5000ms infinite alternate ease-in-out;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      position: relative;
      background-color: #FF6347;
   }
   section {
      background-image: linear-gradient(
      to bottom,
      transparent,
      transparent 49%,
      #4682B4 50%,
      #4682B4 51%,
      transparent 52%
      );
      border: 2px solid #4682B4;
      margin-bottom: 80px;
      width: 600px;
      height: 100px;
      display: flex;
      justify-content: center;
      align-items: center;
   }
   .offsetAnchorA {
      offset-anchor: auto;
      background: #32CD32;
   }
   .offsetAnchorB {
      offset-anchor: bottom right;
      background: #FFD700;
   }
   .offsetAnchorC {
      offset-anchor: top left;
      background: #9932CC;
   }
   @keyframes move {
      0% {
         offset-distance: 10%;
      }
      50% {
         offset-distance: 50%;
      }
      100% {
         offset-distance: 90%;
      }
   }
</style>
</head>
<body>
<section>
   <div class="offsetAnchorA"></div>
</section>
<section>
   <div class="offsetAnchorB"></div>
</section>
<section>
   <div class="offsetAnchorC"></div>
</section>
</body>
</html>

Print Page