SVG CSS 动画无限循环。

Question

我正在尝试创建类似于https://css-tricks.com/svg-line-animation-works的示例，但我希望它可以无限旋转。

#path1 {
  stroke-dasharray: 170;
  -webkit-animation: animate1 5s infinite; /* Chrome, Safari, Opera */ 
  animation: animate1 5s infinite;
}
@keyframes animate1 {
 to {
       stroke-dashoffset: 1000;
 }
}

@-webkit-keyframes animate1 {
 to {
       stroke-dashoffset: 1000;
  }
}

我制作了一个示例http://jsfiddle.net/46cmu71t/。我将代码设置为无限旋转但它会变慢然后重新开始。有没有办法在不损失速度的情况下使其旋转？

- DMande

Answer 1

非常容易实现，只需在过渡线中添加linear方法即可：

#path1 {
  stroke-dasharray: 170;
  -webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */ 
  animation: animate1 5s infinite linear;
} 

更多关于CSS过渡时间的信息
更多关于CSS过渡效果的信息

JSFiddle演示

- Jacob G

---

有没有办法顺时针旋转？还是我应该改变路径？ - DMande

没问题 :D 很高兴能帮忙 - Jacob G

你好！我正在尝试使矩形内部悬停时旋转速度更快。但是Mozilla不能正确地执行。有什么解决方法吗？Chrome做得很好！请检查它 http://jsfiddle.net/46cmu71t/4/ - DMande

我能想到的最好的办法是移除FF的过渡效果：http://jsfiddle.net/46cmu71t/5/ 它会有一个微小的跳动，但几乎不可察觉。 - Jacob G

Answer 2

我建议您更多地了解CSS动画。您需要的属性称为时间函数。默认情况下，动画设置为ease-out，而您应该改用linear。例如：

#path1 {
    stroke-dasharray: 170;
    -webkit-animation: animate1 5s infinite linear; /* Chrome, Safari, Opera */ 
    animation: animate1 5s infinite linear;
}

更新的代码片段: http://jsfiddle.net/mfgmxhqm/

- Timothy Miller