这篇翻译不完整。请帮忙从英语翻译这篇文章。
这是一个实验中的功能
此功能某些浏览器尚在开发中，请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订，所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
草案
本页尚未完工.
这个 offset 是CSS属性的快速属性动画元素沿着定义的路径。
早期版本 规格 属性叫做 motion.
Value not found in DB!
Syntax
/* 偏移位置 */ 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;
语法形式
该属性的语法尚未添加
举例
HTML
<div id="offsetElement"></div>
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;
}
Result
规格
| 规格 | 使用状态 | 注释 |
|---|---|---|
| Motion Path Module Level 1 offset |
Working Draft | Initial definition |
浏览器兼容性
该兼容性表生成从该网页的结构化数据。如果你愿意，请查看https://github.com/mdn/browser-compat-数据，并发送一个引入请求。
| Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|---|
| Basic support | 55 461 | ? | ? | ? | ? | ? |
| Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
|---|---|---|---|---|---|---|---|
| Basic support | 55 461 | 55 461 | ? | ? | ? | ? | 6.0 |
1. Supported as motion.