Javascript svg路径笔划动画无限

例如，我有一个

svg

路径，它看起来像一个圆。我尝试通过使用for循环使它多次动画化。但它不起作用。 这是我用来设置笔划动画的javascript

var loading = function() {

    path = new Array();
    length = new Array();

    path[0] = document.getElementById('loader1');
   length = path[0].getTotalLength();
   path[0].style.transition = path[0].style.WebkitTransition = 'none';

   length[0] = length;
   path[0].style.strokeDasharray = length + ' ' + length;
   path[0].style.strokeDashoffset = length;

   path[0].getBoundingClientRect();
   path[0].style.transition = path[0].style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out';

   path[0].style.strokeDashoffset = '0';

};

loading();

我想让它像一个

gif

，一直都有动画效果。如果有人能帮忙，我将不胜感激

---

这是一个示例

转换只能在两种样式之间进行。您需要CSS动画，而不是过渡

.container
{
位置：绝对位置；
宽度：500px；
高度：500px；
排名：0；
底部：0；
左：0；
右：0；
保证金：自动；
}
@关键帧更改破折号{
从{
行程偏移量：502.7825622558594px；
行程：502.7825622558594 502.7825622558594；
}
到{
行程偏移：0px；
行程：502.7825622558594 502.7825622558594；
}
}
路径{
动画持续时间：1s；
动画名称：changedash；
动画迭代次数：无限；
动画方向：正常；
}

是否可以只向前而不向后设置动画？我发现它的动画方向是：向前；非常感谢你！当然，这是由“动画方向”属性控制的。我在答案中修改了它，这样它就不会倒转了。