css - 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