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

你会想看看立方贝塞尔缓和，它可以做你想要的弹跳效果。 Lea Verou在http://cubic-bezier.com/

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

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

Answer 2

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

而不是

-webkit-transform: all 0.1s;

你必须使用

-webkit-transition: all 0.1s;

http://jsfiddle.net/DZ8Qv/2/

演示

Answer 3

使用jquery，他们有几个插件来帮助这个缓动是其中之一，他们有易弹跳等等，你可以很容易地改变速度和/或动画效果。

css3动画结束时反弹

3 个答案: