offset

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.

offset CSS 简写属性设置了沿定义的路径为元素设置动画所需的所有属性。

备注: 规范的早期版本称此属性为 motion

尝试一下

复合属性

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

语法

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;

形式定义

初始值该简写所对应的每个属性:
适用元素可变换元素
是否是继承属性
Percentages该简写所对应的每个属性:
计算值该简写所对应的每个属性:
动画类型该简写所对应的每个属性:
Creates stacking context

形式语法

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

<offset-position> =
normal |
auto |
<position>

<offset-path> =
none |
<offset-path> || <coord-box>

<offset-distance> =
<length-percentage>

<offset-rotate> =
[ auto | reverse ] ||
<angle>

<offset-anchor> =
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> ]

<offset-path> =
<ray()> |
<url> |
<basic-shape>

<coord-box> =
<paint-box> |
view-box

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

<ray()> =
ray( <angle> &&
<ray-size>? &&
contain? &&
[ at <position> ]? )

<url> =
<url()> |
<src()>

<paint-box> =
<visual-box> |
fill-box |
stroke-box

<ray-size> =
closest-side |
closest-corner |
farthest-side |
farthest-corner |
sides

<url()> =
url( <string> <url-modifier>* ) |
<url-token>

<src()> =
src( <string> <url-modifier>* )

<visual-box> =
content-box |
padding-box |
border-box

示例

让元素在路径上运动

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
offset

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
Uses a non-standard name.
Has more compatibility info.

参见