如何在CSS中重新启动组动画？

Question

如何在CSS中重新启动组动画？我需要使用延迟来再次运行它们。表示完成zoomersout后，它将从头开始运行zoomers1（包括2s延迟）。

我尝试使用无穷大，但发生的是每1秒放大一次。延迟仅运行一次。...

如果可能的话如何做？

css

.letter1{
    color:#74ee76;
    animation: zoomers1 1s ease-in-out forwards,zoomersout 1s ease-in 1s forwards;
}

.letter2{
    color:#7674ee;
    animation: zoomers2 1s ease-in-out 1s forwards,zoomersout 1s ease-in 2s forwards;;
}

@keyframes zoomers1 {
    from {
        z-index: 100;
        scale: 1;
    }

    to {
        font-size:1000px;
        scale: 1;
        z-index: 0;
    }
}

@keyframes zoomers2 {
    from {
        z-index: 200;
        scale: 0;
    }

    to {
        font-size:1000px;
        z-index: 0;
        scale: 1;
    }
}
@keyframes zoomersout {
    from {
        font-size:1000px;
        z-index: 0;
        scale: 1;
    }

    to {
        font-size:1000px;
        z-index: 0;
        scale: 100;
    }
}

html

<div class="lett letter1" style="position:absolute" >F</div>
<div class="lett letter2" style="position:absolute" >R</div> 

我希望发生的例子...

rerun(){
    run-> animations in letter1 after animations letter2 is done
    run-> animations in letter2 after animations letter1 is done
}

不确定在css / javascript / jquery中这怎么可能...感谢任何解决方案...谢谢！

Answer 1

您必须将.letter1 animation样式设置为“无”。

以下示例：

var myelement = document.getElementByClassName("letter1");
myelement.style.animation = "none";
myelement.style.offsetHeight; //now set offset