Как перезапустить групповую анимацию в css? - PullRequest
Новая
       8

Как перезапустить групповую анимацию в css?

0 голосов
/ 10 января 2020

Как перезапустить групповую анимацию в css? Мне нужно запустить их снова, применяя задержки. Это означает, что когда zoomersout выполнено, он будет запускать zoomers1 (включая задержку в 2 с) с самого начала.

Я пытался использовать бесконечное, но в результате происходит увеличение каждые 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 ... Цените любое решение ... Спасибо!

1 Ответ

0 голосов
/ 10 января 2020

Вы должны установить свой стиль .letter1 animation на "none".

Пример ниже: 

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