offset | CSS

在此页

组成特性
句法
形式定义
形式句法
范例
规范
浏览器兼容性
相关话题

offset CSS shorthand property sets all the properties required for animating an element along a defined path.

注意 : Early versions of the spec called this property motion .

组成特性

此特性是下列 CSS 特性的简写：

句法

/* Offset position */
offset: auto;
offset: 10px 30px;
offset: none;
/* Offset path */
offset: ray(45deg closest-side);
offset: path('M 100 100 L 300 100 L 200 300 z');
offset: url(arc.svg);
/* Offset path with distance and/or rotation */
offset: url(circle.svg) 100px;
offset: url(circle.svg) 40%;
offset: url(circle.svg) 30deg;
offset: url(circle.svg) 50px 20deg;
/* Including offset anchor */
offset: ray(45deg closest-side) / 40px 20px;
offset: url(arc.svg) 2cm / 0.5cm 3cm;
offset: url(arc.svg) 30deg / 50px 100px;

形式定义

初始值	as each of the properties of the shorthand: `offset-position` : `auto` `offset-path` : `none` `offset-distance` : `0` `offset-anchor` : `auto` `offset-rotate` : `auto`
适用于	transformable elements
继承	no
百分比	as each of the properties of the shorthand: `offset-position` : referToSizeOfContainingBlock `offset-distance` : refer to the total path length `offset-anchor` : relativeToWidthAndHeight
计算值	as each of the properties of the shorthand: `offset-position` : for `<length>` the absolute value, otherwise a percentage `offset-path` ：如指定 `offset-distance` : for `<length>` the absolute value, otherwise a percentage `offset-anchor` : for `<length>` the absolute value, otherwise a percentage `offset-rotate` ：如指定
动画类型	as each of the properties of the shorthand: `offset-position` : a position `offset-path` : as <angle>, <basic-shape> or <path()> `offset-distance` : a length , percentage or calc(); `offset-anchor` : a position `offset-rotate` : as <angle>, <basic-shape> or <path()>
Creates stacking context	yes

形式句法

[ <'offset-position'>? [ <'offset-path'> [ <'offset-distance'> || <'offset-rotate'> ]? ]? ]! [ / <'offset-anchor'> ]?

范例

Animating an element along a path

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;
}

结果

规范

<body>

规范	状态	注释
Motion Path Module Level 1 The definition of 'offset' in that specification.	工作草案	初始定义

浏览器兼容性

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`	Chrome 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion`	Edge 完整支持 79 完整支持 79 完整支持 79 Alternate Name Alternate Name Uses the non-standard name: `motion`	Firefox 完整支持 72 完整支持 72 不支持 71 — 72 Disabled Disabled ). To change preferences in Firefox, visit	IE 不支持 No	Opera 完整支持 42 完整支持 42 完整支持 33 Alternate Name Alternate Name Uses the non-standard name: `motion`	Safari 不支持 No	WebView Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion`	Chrome Android 完整支持 55 完整支持 55 完整支持 46 Alternate Name Alternate Name Uses the non-standard name: `motion`	Firefox Android 不支持 No	Opera Android 完整支持 42 完整支持 42 完整支持 33 Alternate Name Alternate Name Uses the non-standard name: `motion`	Safari iOS 不支持 No	Samsung Internet Android 完整支持 6.0 完整支持 6.0 完整支持 5.0 Alternate Name Alternate Name Uses the non-standard name: `motion`

图例

完整支持
不支持
用户必须明确启用此特征。
使用非标名称。

元数据

最后修改： Aug 29, 2020

CSS
CSS 参考
CSS Motion Path
特性
1. offset
2. offset-anchor
3. offset-distance
4. offset-path
5. offset-position
6. offset-rotate

在此页