Search code examples
csssvg-animate

svg css animation infinite

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?

Solution

  • 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