CSS 3动画暂停（可以这么说）

Question

我想知道是否有人知道如何暂停（或在某一点调整事件的时间）CSS3动画？

让我们说我有一个反弹的圆圈，我希望它花2秒钟达到最高点，然后暂停（或长时间）它在最高点，然后取决于它是暂停/冻结或者在很长一段时间内它会恢复到原来的位置。感谢您提前提供任何帮助。

Answer 1

CSS动画关键帧可以解决您的问题。

.whatever{
     -webkit-animation: bouncepause 10s infinite;
}

@-webkit-keyframes bouncepause {
        0% {
                bottom:0;
        }
        5% {
                bottom:200px;
        }
        95% {
                bottom:200px;
        }
        100% {
                bottom:0;
        }
}

我只包含-webkit-个供应商前缀，以保持简单。

Demo