jquery - 最后带有弹跳的 css3 动画

Question

我正在尝试让 css3 动画正常工作，但它没有按预期工作。我本质上是在一个非常快速的关闭之后，最后有一个弹跳，就像 flex 一样。我只是无法让动画足够快地关闭，并且弹跳看起来非常慢。

我创建了一个 fiddle 。如有任何帮助，我们将不胜感激。

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    }
40% {
    -webkit-transform: translateY(-30px);
    }
60% {
    -webkit-transform: translateY(-15px);
    }
} 

http://jsfiddle.net/bullrout/DZ8Qv/

Answer 1

您需要查看三次贝塞尔曲线缓动，它可以实现您想要的弹跳效果。 Lea Verou 构建了一个很棒的工具来创建它们，网址为 http://cubic-bezier.com/

例如，这里有一个弹跳，但您可以使用它来获得您想要的效果:http://cubic-bezier.com/#.91,.8,.54,1.39