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

Question

How to restart group animations in css? I need to run them again, applying the delays. Meaning when zoomersout is done it will run the zoomers1 (including the 2s delay) from the start.

I tried to use infinite but what happens is it zooms every 1s. The delay runs once only....

how to make this if possible?

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> 

example i wish to happen...

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

Not sure how is this possible in css/javascript/jquery... Appreciate any solution... Thanks!

Answer 1

You have to set your .letter1 animation style to "none".

Example below :

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