offset

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2022.

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

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

尝试一下

offset: path("M 20 60 L 120 60 L 70 10 L 20 60") 0% auto 90deg;

offset: path( "M 20 210 L 74 210 L 118 140 \ L 62 140 L 20 210" ) 20% auto;

<section class="default-example" id="default-example"> <div class="wrapper"> <div id="example-element"></div> </div> <button id="playback" type="button">Play</button> </section>

#example-element { width: 24px; height: 24px; background: #2bc4a2; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: distance 3000ms infinite normal ease-in-out; animation-play-state: paused; } #example-element.running { animation-play-state: running; } .wrapper { height: 220px; width: 200px; background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 150 140" width="200" height="140"><path d="M 0 60 L 100 60 L 50 10 L 0 60" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>') no-repeat, url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -140 150 230" width="200" height="230"><path d="M 0 70 L 56 70 L 98 0 L 42 0 L 0 70" fill="none" stroke="lightgrey" stroke-width="2" stroke-dasharray="4.5"/></svg>'); } @keyframes distance { to { offset-distance: 100%; } } #playback { position: absolute; top: 0; left: 0; font-size: 1em; }

window.addEventListener("load", () => { const example = document.getElementById("example-element"); const button = document.getElementById("playback"); button.addEventListener("click", () => { if (example.classList.contains("running")) { example.classList.remove("running"); button.textContent = "Play"; } else { example.classList.add("running"); button.textContent = "Pause"; } }); });

复合属性

此属性是以下 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;

形式定义

初始值	该简写所对应的每个属性： `offset-position`: `normal` `offset-path`: `none` `offset-distance`: `0` `offset-anchor`: `auto` `offset-rotate`: `auto`
适用元素	可变换元素
是否是继承属性	否
Percentages	该简写所对应的每个属性： `offset-position`: refer to the size of containing block `offset-distance`: refer to the total path length `offset-anchor`: relative to the width and the height of the element's reference box
计算值	该简写所对应的每个属性： `offset-position`: 对于 `<length>` 则为绝对值，否则为百分比值 `offset-path`: as specified `offset-distance`: 对于 `<length>` 则为绝对值，否则为百分比值 `offset-anchor`: 对于 `<length>` 则为绝对值，否则为百分比值 `offset-rotate`: as specified
动画类型	该简写所对应的每个属性： `offset-position`: a position `offset-path`: 按计算值的类型 `offset-distance`: a length, percentage or calc(); `offset-anchor`: a position `offset-rotate`: as <angle>, <basic-shape> or <path()>
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