如何使用css或js选择动画迭代次数的值

Question

如何使用js或css选择动画迭代计数的值？下面是我的css。目的是第一次绘制黑色，第二次绘制红色。谢谢你的帮助。

.path { animation: draw 8.5s linear ; } @keyframes draw { 0% {stroke: #000;} 25% {stroke:#000;} 50% {stroke: #000;} 75% {stroke: #000;} 100% {stroke: none;fill:#000;stroke-dashoffset:100; } }

Answer 1

我可以使用下面的jQuery函数。

function animate(count) {
console.log("animate", count)
if (count == 0) {
$('.path').css({
'animation': 'draw2 4s'
});
}
if (count == 1) {
$('.path').css({
'animation': 'draw1 4s'
});
}
if (count == 2) {
$('.path').css({
'animation': 'draw3 4s'
});
}
if (count > 0) $('.path:first').one("animationend", function () {
animate(count - 1)
})
}