offset
======

Baseline 2023
-------------

Newly availableSince August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
**`offset`** CSS 简写属性设置了沿定义的路径为元素设置动画所需的所有属性。

**备注：** 规范的早期版本称此属性为 `motion`。

尝试一下
----

复合属性
----

此属性是以下 CSS 属性的简写：

* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)
语法
--


```css
/\* 偏移位置 \*/
offset: auto;
offset: 10px 30px;
offset: none;

/\* 偏移路径 \*/
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);

/\* 使用距离和/或旋转偏移路径 \*/
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;

/\* 包括偏移锚点 \*/
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

/\* 全局值 \*/
offset: inherit;
offset: initial;
offset: revert;
offset: revert-layer;
offset: unset;
```

形式定义
----

|  |  |
| --- | --- |
| 初始值 | as each of the properties of the shorthand:* `offset-position` (en-US): `normal`
* `offset-path` (en-US): `none`
* `offset-distance` (en-US): `0`
* `offset-anchor` (en-US): `auto`
* `offset-rotate` (en-US): `auto`
 |
| 适用元素 | transformable elements |
| 是否是继承属性 | 否 |
| Percentages | as each of the properties of the shorthand:* `offset-position` (en-US): refer to the size of containing block
* `offset-distance` (en-US): refer to the total path length
* `offset-anchor` (en-US): relative to the width and the height of the element's reference box
 |
| 计算值 | as each of the properties of the shorthand:* `offset-position` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-path` (en-US): as specified
* `offset-distance` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-anchor` (en-US): for `length` the absolute value, otherwise a percentage
* `offset-rotate` (en-US): as specified
 |
| Animation type | as each of the properties of the shorthand:* `offset-position` (en-US): a position
* `offset-path` (en-US): by computed value type
* `offset-distance` (en-US): a length, percentage or calc();
* `offset-anchor` (en-US): a position
* `offset-rotate` (en-US): as <angle>, <basic-shape> or <path()>
 |
| Creates stacking context | yes |

### 形式语法
```

offset =   
  [ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?    
  
```

示例
--

### 让元素在路径上运动

#### HTML


```html
<div id="offsetElement"></div>
```


#### CSS


```css
@keyframes move {
  from {
    offset-distance: 0%;
  }

  to {
    offset-distance: 100%;
  }
}

#offsetElement {
  width: 50px;
  height: 50px;
  background-color: blue;
  offset: path("M 100 100 L 300 100 L 200 300 z") auto;
  animation: move 3s linear infinite;
}
```


#### 结果

规范
--

| Specification |
| --- |
| Motion Path Module Level 1 # offset-shorthand |

浏览器兼容性
------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* `offset-anchor` (en-US)
* `offset-distance` (en-US)
* `offset-path` (en-US)
* `offset-position` (en-US)
* `offset-rotate` (en-US)