这篇翻译不完整。请帮忙从英语翻译这篇文章

这是一个实验中的功能
此功能某些浏览器尚在开发中,请参考浏览器兼容性表格以得到在不同浏览器中适合使用的前缀。由于该功能对应的标准文档可能被重新修订,所以在未来版本的浏览器中该功能的语法和行为可能随之改变。

草案
本页尚未完工.

这个 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
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic support
Experimental
Chrome Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion
Edge ? Firefox ? IE ? Opera ? Safari ? WebView Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion
Chrome Android Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion
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.

文档标签和贡献者

此页面的贡献者: yichengxian
最后编辑者: yichengxian,