CSS offset-anchor Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 10 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The offset-anchor property in CSS is part of the CSS Motion Path Module, which allows you to define an animation path for an element. The offset-anchor property specifies the position of the element relative to the path.

This property is particularly useful for creating animations along complex paths, as it allows you to control where the element is anchored on the path.

💡 Syntax

The syntax for the offset-anchor property is:

Syntax

Copied

element {
  offset-anchor: <position>;
}

Here, <position> can be a set of values defining the anchor point relative to the element's box.

🎛️ Default Value

The default value of the offset-anchor property is auto, which means the element's position is automatically calculated based on the element's size and the path.

🏠 Property Values

Value	Description
auto	The default behavior, where the position is automatically determined.
<position>	A value that defines the position of the anchor point, such as top, left, center, or specific coordinates like 10% 20%.

📄 Example

In this example, we'll create a simple animation path using the offset-path property and set the offset-anchor to control the positioning of the animated element.

index.html

Copied

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS offset-anchor Example</title>
  <style>
    .box {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      offset-path: path('M 10,80 Q 95,10 180,80 T 350,80');
      animation: move 5s infinite alternate;
      offset-anchor: 50% 50%;
    }

    @keyframes move {
      100% {
        offset-distance: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>Animation with offset-anchor Property</h1>
  <div class="box"></div>
</body>
</html>

In this example, a blue box follows a curved path, with its anchor point set at the center of the box (50% 50%).

🖥️ Browser Compatibility

The offset-anchor property is a relatively new feature and may not be supported in all browsers. It is recommended to check compatibility and consider providing fallback styles or animations for older browsers.

🎉 Conclusion

The offset-anchor property provides greater control over animations along a path by specifying the anchor point of the element. This can be particularly useful for fine-tuning animations and creating complex motion effects.

By understanding and using offset-anchor, you can enhance the visual appeal of your web projects and create more engaging user experiences.