Loop svg路径动画

Question

我一直在使用svg为一些地图路径设置动画，并且具有以下代码。

var paths = document.querySelectorAll('.path'); 

for (i = 0; i < paths.length; i++) { 

    var length = paths[i].getTotalLength(); 
    // Clear any previous transition 
    paths[i].style.transition = paths[i].style.WebkitTransition ='none'; 
    // Set up the starting positions 
    paths[i].style.strokeDasharray = length + ' ' + length; 
    paths[i].style.strokeDashoffset = length; 
    // Trigger a layout so styles are calculated & the browser 
    // picks up the starting position before animating 
    paths[i].getBoundingClientRect(); 
    // Define our transition 
    paths[i].style.transition = paths[i].style.WebkitTransition = 'stroke-dashoffset 7s ease-in-out'; 
    // Go! 
    paths[i].style.strokeDashoffset = '0'; 

} 

我想要动画是无限的，以便它一旦完成就重新开始。

我

animation-iteration-count: infinite; 

我的CSS中，但似乎并没有这样的伎俩。

有人可以建议我怎么会在js内做这个吗？

还有一个在这里codepen - 提前http://codepen.io/anon/pen/ozxyam

感谢。

Chris

Answer 1

转换是从一个CSS状态转到另一个状态。

如果你想要一个循环动画，那么你应该使用animation CSS属性。

https://developer.mozilla.org/en-US/docs/Web/CSS/animation