CSS - offset-position Property

The CSS property offset-position is used to provide an element's starting location along a route.

  • Often used in combination with the offset-path attribute, it produces a motion effect.

  • If the offset-path function does not define its own beginning position, offset-position is utilized to determine the element's initial placement.

  • A motion system that includes offset related features like offset-anchor, offset-distance, and offset-path also includes the offset-position property.

  • Together, these characteristics provide a variety of motion effects along a set path.

Possible Values

The following list of values are accepted by offset-position property.

  • normal - This option places the element at (50%, 50%) with respect to the contained block, indicating that it does not have an initial offset position.

  • auto - This value indicates that the top-left corner of the element's box is the initial offset position, the default option.

  • <length-percentage> - The offset-position property determines an element's position relative to its box edges using x/y coordinates, with values ranging from one to four representing horizontal and vertical positions.

Applies to

Transformable elements

Syntax

offset-position = normal | auto | <position>

CSS offset-position - Initializing an offset-path's offset-position

The following example demonstrates the usage of offset-position property.

    
<html>
<head>
<style>
   .container {
      width: 80%;
      height: 400px;
      position: relative;
      overflow: hidden;
      background-color: #c6d8f5;
   }
   .object {
      width: 50px;
      height: 50px;
      background-color: #1169f7;
      position: absolute;
      border-radius: 20%;
      offset-path: path("M 50, 200 C 50, 100 250, 100 250, 200 S 450, 300 450, 200");
      offset-position: top 10%;
      animation: moveObject 5s linear infinite;
   }
   @keyframes moveObject {
      0% {
         offset-distance: 0%;
      }
      100% {
         offset-distance: 100%;
      }
   }
</style>
</head>
<body>
<div class="container">
<div class="object"></div>
</div>
</body>
</html>

CSS offset-position - Comparing offset positions

The following example demonstrates the usage of offset-position property's various offset positions.

    
<html>
<head>
<style>
   .container {
      position: relative;
      height: 300px;
      background-color: #f0f0f0;
      margin: 50px auto;
      padding: 20px;
   }
   .box {
      width: 90px;
      height: 90px;
      background-color: #3477eb;
      position: absolute;
      border-radius: 40%;
      animation: moveObject 5s linear infinite;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      color: white;
   }

   @keyframes moveObject {
      0% {
      offset-distance: 0%;
      }
      100% {
      offset-distance: 100%;
      }
   }
   .box-normal::after {
      content: "Normal";
   }
   .box-center::after {
      content: "Center";
   }
   .box-left-top::after {
      content: "Left Top";
   }
   .box-right-bottom::after {
      content: "Right Bottom";
   }
   .box-custom::after {
      content: "Custom (30% 70%)";
   }
   .box-normal {
      offset-position: normal;
      top: 20px;
      left: 20px;
   }
   .box-center {
      offset-position: center;
      top: 20px;
      left: calc(50% - 25px);
   }
   .box-left-top {
      offset-position: left top;
      top: 20px;
      left: 20px;
   }
   .box-right-bottom {
      offset-position: right bottom;
      bottom: 20px;
      right: 20px;
   }
   .box-custom {
      offset-position: 30% 70%;
      top: calc(30% - 25px);
      left: calc(70% - 25px);
   }
</style>
</head>
<body>
   <div class="container">
      <div class="box box-normal"></div>
      <div class="box box-center"></div>
      <div class="box box-left-top"></div>
      <div class="box box-right-bottom"></div>
      <div class="box box-custom"></div>
   </div>
</body>
</html>
Advertisements