我想在CSS3中模拟一个
elastic easing function. CSS3本身并不支持这个,所以我一直想出自己的关键帧,它看起来还不错,但并不完全自然.
我不想要一个需要任何其他JavaScript脚本的解决方案. StackOverflow上的所有其他帖子都接受了JS解决方案.
在纯CSS3中实现弹性缓动的最佳方法是什么？
到目前为止,这是我的工作,如果这有助于任何人……
https://jsfiddle.net/407rhhnL/1/
我正在制作红色,绿色和蓝色等长矩形棱镜的动画.我通过硬编码以下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);
}
}
解决方法
根据您的浏览器限制(如果您使用CSS3,无论如何都应该没问题),您实际上可以使用
cubic-bezier()关键字应用缓动转换.
示例动画如下所示：
transition-timing-function: cubic-bezier(0.64,0.57,0.67,1.53); transition-duration: 2.9s;
Lea Verou’s blog post很好地涵盖了这一点.
