CSS CSS3 中的弹性缓动，最佳方法
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23462515/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Elastic easing in CSS3, best approach
提问by Jimmie Tyrrell
I'd like to emulate an elastic easing functionin CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.
我想在 CSS3 中模拟一个弹性缓动功能。CSS3 本身不支持这个，所以我一直在想出我自己的关键帧，它看起来不错，但并不完全自然。
I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.
我不想要一个需要任何额外 JavaScript 脚本的解决方案。StackOverflow 上的所有其他帖子都接受了 JS 解决方案。
What's the best way to implement elastic easing in pure CSS3?
在纯 CSS3 中实现弹性缓动的最佳方法是什么？
Here's my work so far, if that helps anybody...
这是我到目前为止的工作，如果这对任何人有帮助......
https://jsfiddle.net/407rhhnL/1/
https://jsfiddle.net/407rhhnL/1/
I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:
我正在为红色、绿色和蓝色等距直角棱镜设置动画。我通过硬编码以下 CSS3 关键帧来手动模拟弹性缓动：
@include keyframes(popup) {
0% {
}
20% {
transform: translateY(-50px);
}
40% {
transform: translateY(20px);
}
60% {
transform: translateY(-6px);
}
90% {
transform: translateY(0px);
}
100% {
transform: translateY(0px);
}
}
I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.
我不是在寻找有关调整此代码的建议，我想知道是否有比硬编码更好的解决方案。
回答by Phil.Wheeler
Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier()keyword instead.
根据您的浏览器限制（如果您使用的是 CSS3，则无论如何都应该没问题），您实际上可以使用cubic-bezier()关键字来应用缓动过渡。
An example animation would look like this:
示例动画如下所示：
transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;
Lea Verou's blog postcovers this pretty well.
Lea Verou 的博客文章很好地涵盖了这一点。
回答by Rowan
Lots of great cubic-bezier transitions available here:
这里有很多很棒的三次贝塞尔转换：
Something like this might be what you want:
像这样的事情可能是你想要的：
transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
