需求
要做一个开关和一个电灯,中间电线连接,点击开关的时候,光点从开关出发,沿电线移动到灯泡,然后灯泡熄灭。
translate
最初的思路是给通过改变光点的 translate 方式来移动其位置,这样的话动画一共需要分 10 段完成,而且在转弯的曲线部分会不够平滑。
motion-path
考虑到 SVG 中有 path 元素可以定义路径,CSS3 中会不会也有类似的方法。搜索到有 motion-path 可以很方便使元素按照路径进行移动。通过定义 motion-path 并且指定 motion-offset 的渐变来实现光点的移动。
@keyframes ani_move {
100% {
motion-offset: 100%;
}
}
#star.move {
motion-path: path('m40,47 115,0 c0,0 38,0 38,-38m0,0 0,-235c0,0 -0,-21 -28,-20m0,0 -237,0c0,0 -26,0 -26,29m0,0 0,190c0,0 0,22 30,22m0,0 92,0c0,0 18,0 18,-18m0,0 0,-10');
animation: ani_move linear 3s;
display: block;
}
这种方法做完之后在 Android 设备上可以正常使用,在 iOS 设备上毫无反应,MDN 提示这个属性是被摒弃的属性,在兼容性列表中标记各大浏览器均不支持。推荐可以使用 offset-path 属性来替代,然而