svg css animation infinite

Question

I am trying to make a similar example like https://css-tricks.com/svg-line-animation-works but I would like it to rotate infinite.

#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;
  }
}

I made an example http://jsfiddle.net/46cmu71t/. I put the code to do this infinite but it slow down and then start again. Is there any way to make it rotate without losing speed?

Answer 1

Very easy to do, add the linear method to the transition line:

#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