CSS3中的弹性缓和,最好的方法

Question

我想在CSS3中模拟弹性缓动函数.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);
  }
}

我不是在寻找有关调整此代码的建议,我想知道是否有比硬编码更好的解决方案.

Answer 1

根据您的浏览器限制(如果您使用CSS3,无论如何都应该没问题),您实际上可以使用cubic-bezier()关键字来应用缓动过渡.

示例动画如下所示:

transition-timing-function: cubic-bezier(0.64, 0.57, 0.67, 1.53);
transition-duration: 2.9s;

Lea Verou的博客文章很好地介绍了这一点.

Answer 2

这里有很多很棒的立方贝塞尔过渡:

http://easings.net/

这样的事情可能就是你想要的:

transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);