CSS3动画停留在结束状态3秒

Question

做CSS3动画的时候，有没有可能在动画结束的时候停留几秒，然后回到原来的状态？

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

谢谢。

Answer 1

当然。不过，您必须做一些计算，因为关键帧停止是按总动画的百分比来衡量的。假设您的整个动画应该持续 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取决于您已经实现的动画技术。