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

【问题标题】：How to restart group animations in css?如何在css中重新启动组动画？
【发布时间】：2020-04-27 22:55:49
【问题描述】：

如何在 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 中是如何实现的... 感谢任何解决方案...谢谢！

【问题讨论】：

也许可以看看这个 Stack 帖子：stackoverflow.com/questions/54052364/…
这与javascript或jquery有什么关系
Javascript 和 jquery 我认为这可以用他们完成，但不确定它是否有效（延迟）。
@LouisGrasset 不确定，但延迟后它将仅根据持续时间运行动画，不包括第一次运行后的延迟。
代表@thingEvery - 如果您使用 jquery/javascript 删除类然后重新添加会发生什么？

标签： javascript jquery css animation css-transitions

【解决方案1】：

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

下面的例子：

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

【讨论】：

如果没有动画，它会如何再次运行？