在没有javascript的情况下重新启动CSS3动画？答案

【问题标题】：Restart CSS3 Animation without javascript?在没有javascript的情况下重新启动CSS3动画？
【发布时间】：2016-04-29 21:02:32
【问题描述】：

是否可以在以相同的动画延迟时间再次停止后“重新启动”关键帧动画？

@keyframes scale {
50% { transform: scale(1.2); }
100% { transform: scale(1); }
}

.animated-btn {
animation: scale ease-in 1;
animation-fill-mode:forwards;
animation-duration: .6s;
animation-delay: 11.8s;
}

<a href="" class="btn btn__arrow animated-btn">
Aniamted Button
</a>

【问题讨论】：

标签： css animation keyframe

【解决方案1】：

很遗憾，无法在每个动画之前设置延迟，但您可以在动画内部设置延迟。让动画暂时什么都不做，直到达到一定的百分比。

这是更新后的代码。

@keyFrames scale {
    90% {
        transform: scale(1)
    }
    95% {
        transform: scale(1.3)
    }
    100% {
        transform: scale(1);
    }
}

.animated-btn {
    display: inline-block;
    animation: scale ease-in 1;
    animation-fill-mode: forwards;
    animation-duration: 12.4s;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    /* Or the shorthand:
    animation: scale 1.4s 0s infinite ease-in forwards;
    */
}

【讨论】：

【解决方案2】：

是的，您只需要使用the animation-iteration-count property。您可以将其值设置为 infinite。

【讨论】：

没错 - 但是动画一直在播放。我需要动画再次具有相同的延迟时间，然后再次播放