jquery - 结尾有反弹的css3动画

Question

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

我创造了一个小提琴。任何帮助表示赞赏。

@-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

You'll want to look at cubic-bezier easing, which can do the bouncing effect you want. Lea Verou built a great tool for creating them at http://cubic-bezier.com/

For example, here's one with a bounce, but you can play with it to get the effect you want: http://cubic-bezier.com/#.91,.8,.54,1.39

Answer 2

问题是您没有启用转换，因为您在#drawercss 规则中使用了错误的名称

代替

-webkit-transform: all 0.1s;

你必须使用

-webkit-transition: all 0.1s;

演示在http://jsfiddle.net/DZ8Qv/2/

Answer 3

为此使用 jquery，他们有几个插件来帮助实现这种缓动，其中之一就是他们有 easeoutbounce 之类的，你可以改变速度和/或动画效果也很容易实现。