偏移量
Baseline 2023
Newly available
Since August 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
offset
CSS 速记属性 设置了沿定义路径为元素设置动画所需的全部属性。offset 属性共同帮助定义一个 *offset transform*,一个 transform,它将元素中的一个点 (offset-anchor) 与路径上的 *offset position* (offset-position) 对齐,在路径上 (offset-path) 的各个点,并可选地旋转元素 (offset-rotate) 以跟随路径的方向。
注意:规范的早期版本将此属性称为 motion
。
试试看
构成属性
此属性是以下 CSS 属性的速记
语法
css
/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;
/* Offset path */
offset: ray(45deg closest-side);
offset: path("M 100 100 L 300 100 L 200 300 z");
offset: url(arc.svg);
/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;
/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;
/* Global values */
offset: inherit;
offset: initial;
offset: revert;
offset: revert-layer;
offset: unset;
正式定义
初始值 | 与速记属性的每个属性相同
|
---|---|
应用于 | 可变形元素 |
继承 | 否 |
百分比 | 与速记属性的每个属性相同
|
计算值 | 与速记属性的每个属性相同
|
动画类型 | 与速记属性的每个属性相同
|
创建 堆叠上下文 | 是 |
正式语法
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;
}
结果
规范
规范 |
---|
运动路径模块级别 1 # offset-shorthand |
浏览器兼容性
BCD 表格仅在浏览器中加载