offset
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 简写属性设置了沿定义的路径为元素设置动画所需的所有属性。
备注: 规范的早期版本称此属性为 motion
。
尝试一下
复合属性
语法
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:
|
---|---|
适用元素 | transformable elements |
是否是继承属性 | 否 |
Percentages | as each of the properties of the shorthand:
|
计算值 | as each of the properties of the shorthand:
|
Animation type | as each of the properties of the shorthand:
|
Creates stacking context | yes |
形式语法
示例
让元素在路径上运动
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