Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS offset-anchor Property

Posted in CSS Tutorial
Updated on Jul 26, 2024
By Mari Selvan
👁️ 7 - Views
⏳ 4 mins
💬 1 Comment
CSS offset-anchor Property

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
Copy To Clipboard
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

ValueDescription
autoThe 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
Copy To Clipboard
<!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.

👨‍💻 Join our Community:

To get interesting news and instant updates on Front-End, Back-End, CMS and other Frameworks. Please Join the Telegram Channel:

Author

author
👋 Hey, I'm Mari Selvan

For over eight years, I worked as a full-stack web developer. Now, I have chosen my profession as a full-time blogger at codetofun.com.

Buy me a coffee to make codetofun.com free for everyone.

Buy me a Coffee

Share Your Findings to All

Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
We make use of cookies to improve our user experience. By using this website, you agree with our Cookies Policy
AgreeCookie Policy