Front-end Tutorials

Front-end Tutorials

HTMLCSSSassJavaScriptReactJS
CMS Tutorials

CMS Tutorials

WordPress
Tutorials expand

CSS Properties

CSS offset Property

Posted in CSS Tutorial
Updated on Oct 07, 2024
By Mari Selvan
👁️ 13 - Views
⏳ 4 mins
💬 1 Comment
CSS offset Property

Photo Credit to CodeToFun

🙋 Introduction

The offset property in CSS is used to control animations along a predefined path. It is part of the CSS Motion Path specification and is used with the @keyframes rule to define animations.

The offset property specifies the position of an element along a path defined by the offset-path property, allowing for more complex and dynamic animations.

💡 Syntax

The offset property has several sub-properties that work together to define the animation's behavior:

Syntax
Copied
Copy To Clipboard
element {
  offset-path: path;
  offset-distance: distance;
  offset-anchor: position;
  offset-rotate: angle | auto | reverse;
}

🎛️ Default Value

The default values for the sub-properties are:

  • offset-path: none
  • offset-distance: 0
  • offset-anchor: auto
  • offset-rotate: auto

🏠 Property Values

ValueDescription
offset-pathDefines the path along which the element moves. It can be a path() function, a url() for SVG paths, or keywords like none and ray().
offset-distanceSpecifies the distance along the path. It can be a percentage or a length.
offset-anchorDefines the point within the element that is positioned on the path. It can be auto or a length value for the x and y coordinates.
offset-rotateDetermines the rotation of the element as it moves along the path. It can take values like auto, reverse, or a specific angle.

📄 Example

In this example, we create a simple animation where a box follows a circular path.

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 Property Example</title>
  <style>
    @keyframes moveInCircle {
      from {
        offset-distance: 0%;
      }
      to {
        offset-distance: 100%;
      }
    }

    .animated-box {
      width: 50px;
      height: 50px;
      background-color: blue;
      position: absolute;
      offset-path: path('M 150,200 A 100,100 0 1 1 149,200');
      animation: moveInCircle 5s linear infinite;
    }
  </style>
</head>
<body>
  <h1>Box Following a Circular Path</h1>
  <div class="animated-box"></div>
</body>
</html>

🖥️ Browser Compatibility

The offset property and its associated sub-properties are relatively new and may not be fully supported in all browsers. As of now, they are supported in modern versions of Chrome and Firefox. Always check for the latest browser support and consider using feature detection or fallbacks for unsupported browsers.

🎉 Conclusion

The offset property in CSS provides a powerful tool for creating complex animations along predefined paths.

By controlling properties such as offset-path, offset-distance, offset-anchor, and offset-rotate, developers can create dynamic and engaging animations that enhance the user experience. Experiment with these properties to bring life and movement to your web projects.

👨‍💻 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