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

提前致谢。

克里斯

Answer 1

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

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

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

循环svg路径动画

1 个答案: