CSS offset Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 22 - Views

⏳ 4 mins

💬 1 Comment

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

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

Value	Description
offset-path	Defines 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-distance	Specifies the distance along the path. It can be a percentage or a length.
offset-anchor	Defines 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-rotate	Determines 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

<!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.