DigitalOcean 为您旅程的每个阶段提供云产品。立即开始使用 $200 免费信用额度!
motion-offset
。此属性和其他所有相关的 motion-* 属性,正在 规范 中被重新命名为 offset-*。我们正在年鉴中更改这些名称。如果您现在想要使用它,最好使用两种语法。CSS 中的 motion-offset
属性表示:您在 motion-path
上走了多远?这是与运动路径相关的**可动画**属性。
.thing-that-moves {
/* "Old" syntax. Available in Blink browsers as of ~October 2015 */
motion-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
motion-offset: 0%;
/* Currently spec'd syntax. Should be in stable Chrome as of ~December 2016 */
offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
offset-distance: 0%;
animation: move 3s linear infinite;
}
/* Animate the element along the path from 0% to 100% */
@keyframes move {
100% {
motion-offset: 100%; /* Old */
offset-distance: 100%; /* New */
}
}
在上例中,我们将初始 motion-offset
值设置为 0%
,但值得注意的是,即使未明确定义,零也是默认值(我们可以省略该值)。
变量
offset-distance
属性接受以下值
长度
百分比
在这两种情况下,该值都指定了从路径起点(默认值为 0px
或 0%
)到路径终点的距离长度。
示例
在本例中,我们有两个圆圈,其中一个较小的圆圈沿着较大的圆圈的路径运动。
以下是我们用来绘制形状的 SVG 文件
<svg viewbox="0,0 10,10" width="200px" height="200px">
<!-- the circle path to be animated along -->
<path
class="track"
fill="none"
stroke-width="0.25"
d="M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0"
/>
<!-- the mover that follows the path -->
<circle class="marker" r="1" fill="orange"></circle>
</svg>
现在,我们可以将 CSS 中的 .marker
类设置为跟随 .track
类的坐标
/* The motion-offset is zero by default */
.marker {
offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
animation: move 3s linear infinite;
}
@keyframes move {
/* Move the .marker from it's default value of 0% to 100% of the path's length */
100% { offset-distance: 100%; }
}
查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例。
类似地,我们可以将 offset-distance
值停止在 50%,动画将在路径的半途停止。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例。
或者,为了控制动画的速度,我们可以将 offset-distance
值乘以 300% 来加快速度。但是,如果我们指定了动画运行的时间超过了元素走完路径所需的时间,那么运动将停止,直到动画完成其间隔才能重复。
查看 CodePen 上 Geoff Graham (@geoffgraham) 的 沿路径动画的简单示例。
浏览器支持
撰写本文时,offset-distance
属性仍被视为一项实验性功能,并且没有有关浏览器支持的文档。但是,有关 motion-path
支持的文档,我们可以将其作为当前的参考标准。
这些浏览器支持数据来自 Caniuse,其中包含更多详细信息。数字表示浏览器从该版本开始支持该功能。
桌面
Chrome | Firefox | IE | Edge | Safari |
---|---|---|---|---|
46 | 72 | 否 | 79 | 16.0 |
移动设备 / 平板电脑
Android Chrome | Android Firefox | Android | iOS Safari |
---|---|---|---|
127 | 127 | 127 | 16.0 |
相关属性
- offset-path
- offset-rotation
- offset-position
- offset-anchor