CSS Motion Path

在此页

基本范例
参考
规范
浏览器兼容性
相关话题

这是实验性技术
检查浏览器兼容性表格要小心谨慎在生产中使用这之前。

Motion Path is a CSS module that allows authors to animate any graphical object along a custom path.

The idea is that when you want to animate an element moving along a path, you previously only had animating translation, position, etc. at your disposal, which wasn't ideal and only allowed for simple movements. With offset-path you can define a specific path of any shape you want. You then animate it along that path by animating offset-distance , and can choose to rotate it at any point using offset-rotate .

基本范例

<div id="motion-demo"></div>

#motion-demo {
  offset-path: path('M20,20 C20,100 200,0 200,100');
  animation: move 3000ms infinite alternate ease-in-out;
  width: 40px;
  height: 40px;
  background: cyan;
}
@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

参考

特性

规范

规范	状态	注释
Motion Path Module Level 1	工作草案	初始定义。

浏览器兼容性

offset property

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request. 更新 GitHub 上的兼容性数据

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`offset-path`	Chrome 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Edge 完整支持 79 完整支持 79 完整支持 79 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Firefox 完整支持 72 完整支持 72 不支持 63 — 72 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 45 完整支持 45 完整支持 32 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Safari 不支持 No	WebView Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Chrome Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Firefox Android 完整支持 63 Disabled 完整支持 63 Disabled Disabled ). To change preferences in Firefox, visit	Opera Android 完整支持 43 完整支持 43 完整支持 32 Alternate Name Alternate Name Uses the non-standard name: `motion-path`	Safari iOS 不支持 No	Samsung Internet Android 完整支持 6.0 注意事项完整支持 6.0 注意事项注意事项 `path()` is the only value type supported. 完整支持 5.0 Alternate Name Alternate Name Uses the non-standard name: `motion-path`
Supports the `path()` function as a value	Chrome 完整支持 64	Edge 完整支持 79	Firefox 完整支持 63	IE 不支持 No	Opera 完整支持 51	Safari 不支持 No	WebView Android 完整支持 64	Chrome Android 完整支持 64	Firefox Android 完整支持 63	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0
Supports the `ray()` function as a value	Chrome 完整支持 64	Edge 完整支持 79	Firefox 完整支持 71 Disabled 完整支持 71 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 51	Safari 不支持 No	WebView Android 完整支持 64	Chrome Android 完整支持 64	Firefox Android 不支持 No	Opera Android 完整支持 47	Safari iOS 不支持 No	Samsung Internet Android 完整支持 9.0

图例

完整支持
不支持
见实现注意事项。
用户必须明确启用此特征。
使用非标名称。

元数据

最后修改： Sep 25, 2020

在此页

基本范例

参考

特性

规范

浏览器兼容性

offset property

图例

相关话题