CSS offset-distance Property

Posted in CSS Tutorial

Updated on Oct 07, 2024

By Mari Selvan

👁️ 19 - Views

⏳ 4 mins

💬 1 Comment

Photo Credit to CodeToFun

🙋 Introduction

The offset-distance property in CSS is used to define the distance of an element along an offset path.

This property is typically used with offset-path to animate elements along a predefined path, such as a line, curve, or any other shape. By specifying the offset-distance, you can control the position of the element along the path, making it useful for creating dynamic and engaging animations.

💡 Syntax

The syntax for the offset-distance property is simple and allows you to specify the distance as a length or percentage value.

Syntax

Copied

element {
  offset-distance: value;
}

value can be a length (e.g., 10px, 2em) or a percentage (e.g., 50%).

🎛️ Default Value

The default value of the offset-distance property is 0, which means the element starts at the beginning of the offset path.

🏠 Property Values

Value	Description
Length	A specific distance from the start of the path (e.g., 100px, 2rem).
Percentage	A percentage of the total length of the path (e.g., 50%).

📄 Example

In this example, we'll animate a circle along a rectangular path using the offset-distance property.

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-distance Example</title>
  <style>
    .animated {
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: red;
      border-radius: 50%;
      offset-path: path('M10 10 H 290 V 290 H 10 Z');
      animation: move 5s infinite linear;
    }

    @keyframes move {
      from {
        offset-distance: 0%;
      }
      to {
        offset-distance: 100%;
      }
    }
  </style>
</head>
<body>
  <h1>Circle Animating Along a Path</h1>
  <div class="animated"></div>
</body>
</html>

In this example, the .animated element (a small red circle) moves along a rectangular path defined by the offset-path property. The offset-distance is animated from 0% to 100%, making the circle travel around the path.

🖥️ Browser Compatibility

The offset-distance property is supported in most modern browsers, including Chrome, Edge, and Opera. However, some older versions of browsers or less common browsers might not support it. It's advisable to test your animations across different browsers to ensure compatibility.

🎉 Conclusion

The offset-distance property is a versatile tool for creating animations along a predefined path in CSS.

By adjusting the distance along the path, you can control the position and movement of elements, making it ideal for interactive and visually appealing web design. Experiment with different paths and distances to explore the full potential of this property.