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