这篇翻译不完整。请帮忙从英语翻译这篇文章。
这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。
草案
本页尚未完工.
这个 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-数据,并发送一个引入请求。
Update compatibility data on GitHub
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome
Full support
55
| Edge ? | Firefox ? | IE ? | Opera ? | Safari ? | WebView Android
Full support
55
| Chrome Android
Full support
55
| Edge Mobile ? | Firefox Android ? | Opera Android ? | Safari iOS ? | Samsung Internet Android Full support 6.0 |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
- Experimental. Expect behavior to change in the future.
- Experimental. Expect behavior to change in the future.
- Uses a non-standard name.
- Uses a non-standard name.