gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 01:47:32 24 4
gpt4 key购买 nike

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

最佳答案

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

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

关于jquery - 最后带有弹跳的 css3 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19245602/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com