CSS3动画停留在最终状态3秒

Question

在做CSS3动画时，是否可以在动画结束时停留几秒钟，然后再回到原始状态？

我知道你可以让CSS3动画在最后一帧结束，或者回到第一帧，但我想在最后一帧暂停几秒钟，然后回到开头。

谢谢。

Answer 1

我相信你需要一点点Javascript才能让它发挥作用。您可以通过Javascript检测动画的结束，运行计时器，当计时器完成时，您可以重置并重新启动动画。

这里有一些参考资料：

• CSS Animation Callback
• Restart CSS Animation

Answer 2

不确定。但是，你必须做一些数学计算，因为关键帧停止是以动画总数的百分比来衡量的。假设您的总动画应该持续12秒 - 这意味着您的动画应该在动画总时间的最后25％内不动。我将修改W3schools中的示例以演示此内容。

div.animated {
    -webkit-animation: with_delay 12s linear 0s infinite; /* Chrome, Safari, Opera */
    animation: with_delay 12s linear 0s infinite; /* Standard syntax */
}

/* Chrome, Safari, Opera */
@-webkit-keyframes with_delay {
    0%   {background: red;}
    75%  {background: green;}
    100% {background: green;}
}

/* Standard syntax */
@keyframes with_delay {
    0%   {background: red;}
    75%  {background: green;}
    100% {background: green;}
}

Here is a live demo.

---

请注意，如果你不介意延迟是在动画的开头而不是结尾，那就更容易了。只需指定animation-delay或transition-delay，具体取决于您已实施的动画技术。