当我的所有动画完成后，如何刷新我的动画序列

Question

我的页面上有多个带动画的div，用CSS创建。当动画的最后一个div完成动画时，我希望重新开始整个序列。我的动画都有不同的延迟时间和动画。我已经尝试了“动画：无限”，但实现的是每个动画在动画完成后立即再次运行。所有动画完成后我都需要从头开始。

任何人都知道如何实现这一目标？

示例CSS

.openDiv {
    width: 0px;
    height: 513px;
    background-image: url("CLS-circle-Ring-faded.png");
    animation-name: grow;
    animation-duration: 2s;
    animation-fill-mode: forwards;
    animation-delay: 2s;
    transition-delay: 10s;
    -webkit-animation-name: grow;
    -webkit-animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-delay: 2s;
    -webkit-transition-delay: 10s;
}

@-webkit-keyframes grow {
    0% {
        width: 0px;
    }

    100% {
        width: 1379px;
    }
} /* Standard syntax */@keyframes grow {
    0% {
        width: 0px;
    }

    100% {
        width: 1379px;
    }
}