结尾有反弹的css3动画答案

【问题标题】：css3 animation with bounce at the end结尾有反弹的css3动画
【发布时间】：2013-10-15 06:02:58
【问题描述】：

我正在尝试让 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/

【问题讨论】：

你为什么不用gsgd.co.uk/sandbox/jquery/easing？它们有两个功能“easeInBack”和“easeOutBack”，可以为您提供所需的反弹。
反弹看起来很慢？您是否尝试过减少动画持续时间？

标签： jquery css animation

【解决方案1】：

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

代替

-webkit-transform: all 0.1s;

你必须使用

-webkit-transition: all 0.1s;

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

【讨论】：

【解决方案2】：

您需要查看三次贝塞尔缓动，它可以实现您想要的弹跳效果。 Lea Verou 在http://cubic-bezier.com/

构建了一个很棒的工具来创建它们

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

【讨论】：

【解决方案3】：

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

【讨论】：