我有一个使用 css 的动画 svg 行。
我希望动画持续时间为 200 秒，但我希望该行在结束后自动重新启动。
这是我的代码示例。
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 200s infinite;
animation: draw 200s infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
@keyframes draw {
0% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>为了重新启动动画，我更改了animation标签:
-webkit-animation: draw 200s 2s infinite;
animation: draw 200s 2s infinite;
然而，我得到的效果是:
- 首先:两秒后该行结束。
- 它以所需的持续时间(200 秒)重新开始。但是，它完成后不会立即重新开始。
如何在动画完成后自动重新启动动画。我需要使用 javascript 还是 jquery？
最佳答案
问题是您的动画持续时间设置为 200 秒，因此根据您的 CSS，它将在 200 秒后再次循环并再延迟 2 秒。据我了解，您希望缓慢绘制线条，因此您使用的是 200 秒的动画，这不是实现此目的的最佳方法——至少不是因为您希望动画在短暂延迟后重新启动。
您可以通过使用 ease-in 结合更改动画来使线条变慢，如下所示。这应该会达到您正在寻找的预期效果。
line {
stroke-linejoin: round;
stroke-linecap: round;
stroke-dasharray: 500%;
stroke-dasharray: 0 \0/;
stroke-dashoffset: 0 \0/;
-webkit-animation: draw 2s ease-in infinite;
animation: draw 2s ease-in infinite;
}
/* Safari 4.0 - 8.0 */
@-webkit-keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}
@keyframes draw {
0% {
stroke-dashoffset: 500%;
},
99% {
stroke-dashoffset: 500%;
},
100% {
stroke-dashoffset: 0%;
}
}<body>
<svg height="100" width="250">
<line x1="25" y1="30" x2="45" y2="30" style="stroke:rgb(255,0,0);stroke-width:4" />
</svg>
</body>关于css - 完成后如何自动重启动画 svg 行？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/50339953/