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

Question

是否可以"restart"一个关键帧动画停止后再次使用相同的动画延迟时间？

@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>

Answer 1

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

Answer 2

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

这是更新后的代码。

@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;
    */
}

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

Restart CSS3 Animation without javascript?

css

animation

keyframe