offset

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

草案
本页尚未完工.

这个 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 AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
offset
Experimental
Chrome Full support 55
Full support 55
Full support 46
Alternate Name
Alternate Name Uses the non-standard name: motion
Edge No support NoFirefox No support NoIE No support NoOpera Full support 42
Full support 42
Full support 33
Alternate Name
Alternate Name Uses the non-standard name: motion
Safari No support NoWebView 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
Firefox Android No support NoOpera Android ? Safari iOS No support NoSamsung Internet Android Full support 6.0

Legend

Full support  
Full support
No support  
No 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.