offset-position

Baseline 2022

Newly available

Since September 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The offset-position CSS property defines the initial position of an element along a path. This property is typically used in combination with the offset-path property to create a motion effect. The value of offset-position determines where the element gets placed initially for moving along an offset path if an offset-path function such as path() does not specify its own starting position.

The offset-position property is part of a motion system based on offset constituent properties, including offset-anchor, offset-distance, and offset-path. These properties work together to create various motion effects along a path.

Syntax

css
/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

/* Global values */
offset-position: inherit;
offset-position: initial;
offset-position: revert;
offset-position: revert-layer;
offset-position: unset;

Values

normal

Indicates that the element does not have an offset starting position and places the element at 50% 50% of the containing block. This is the default value.

auto

Indicates that the offset starting position is the top-left corner of the element's box.

<position>

Specifies the position as an x/y coordinate to place an element relative to its box edges. The position can be defined using one to four values. If two non-keyword values are used, the first value represents the horizontal position and the second represents the vertical position. If only one value is specified, the second value is assumed to be center. If three or four values are used, the <length-percentage> values are offsets for the preceding keyword value(s). For more explanation of these value types, see background-position.

Formal definition

Initial valuenormal
Applies totransformable elements
Inheritedno
Percentagesrefer to the size of containing block
Computed valuefor <length> the absolute value, otherwise a percentage
Animation typea data type are interpolated independently for the abscissa and ordinate. As the speed is defined by the same for both, the point will move following a line.">position

Formal syntax

offset-position = 
  normal      |
  auto        |
  <position>  

<position> = 
  [ left | center | right | top | bottom | <length-percentage> ]  |
  [ left | center | right ] && [ top | center | bottom ]  |
  [ left | center | right | <length-percentage> ] [ top | center | bottom | <length-percentage> ]  |
  [ [ left | right ] <length-percentage> ] && [ [ top | bottom ] <length-percentage> ]  

<length-percentage> = 
  <length>      |
  <percentage>

Examples

Setting initial offset-position for an offset-path

In this example, the offset-path property is used to define the path along which the cyan element should move. The value of the path() CSS function is an SVG data path that describes a curved path. The element moves along this curved path during the move animation.

HTML

html
<div id="wrap">
  <div id="motion-demo"></div>
</div>

CSS

css
#motion-demo {
  offset-path: path("M20,20 C20,100 200,0 200,100");
  offset-position: left top;
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}

@keyframes move {
  0%,
  20% {
    offset-distance: 0%;
  }
  80%,
  100% {
    offset-distance: 100%;
  }
}

Result

Comparing various offset starting positions

This example visually compares various initial offset starting position of an element when ray() is used to specify a value for the offset-path property. The number inside the element box indicates the element to which CSS is applied as well as the element's anchor point.

css
.box {
  background-color: green;
  border-top: 6px dashed white;
  background-clip: border-box;
  position: absolute;
  top: 20px;
  left: 20px;
  opacity: 20%;
  color: white;
}

.box0 {
  offset-position: normal;
}

.box1 {
  offset-position: normal;
  offset-path: ray(0deg);
}

.box2 {
  offset-position: auto;
  offset-path: ray(0deg);
}

.box3 {
  offset-position: left top;
  offset-path: ray(0deg);
}

.box4 {
  offset-position: 30% 70%;
  offset-path: ray(120deg);
}

Result

In box0, the absence of the offset-path property means that an offset-position of either normal or auto has no effect. When offset-position is normal, the ray starts at the center of the containing block (i.e., 50% 50%). This is the default starting position of an offset path and is used when no offset-position is specified. Notice the difference between offset starting positions auto and left top. The value auto aligns the element's anchor point to its own top-left corner, whereas the value left top aligns the element's anchor point to the top-left corner of the containing block.

Specifications

Specification
Motion Path Module Level 1
# offset-position-property

Browser compatibility

BCD tables only load in the browser

See also