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

【问题标题】：CSS 3 animation pausing (so to speak)CSS 3 动画暂停（可以这么说）
【发布时间】：2011-12-09 10:34:23
【问题描述】：

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

假设我有一个弹跳的圆圈，我希望它需要 2 秒才能到达最高点，然后在最高点暂停（或长时间）它，然后取决于它是否暂停/冻结或者在很长一段时间内让它回到原来的位置。提前感谢您的帮助。

【问题讨论】：

How to pause and resume CSS3 animation using JavaScript?的可能重复
不使用 javascript 就无法做到这一点。

【解决方案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

【讨论】：