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/。我把代码放在无限的地方，但它变慢了，然后又重新开始了。有什么方法可以让它在不失速的情况下旋转吗？

Answer 1

非常好办，在过渡行添加linear方法：

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

More about CSS transition timing
More about CSS transitions

JSFiddle Demo

Answer 2

可能想进一步阅读 CSS Animations。您要查找的属性称为计时函数。默认情况下，动画设置为 ease-out，您应该改用 linear。例如

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

已更新 fiddle：http://jsfiddle.net/mfgmxhqm/

svg css 动画无限

svg css animation infinite

css

svg-animate

JSFiddle Demo