Question

我想在CSS3中模仿elastic easing function。 CSS3本身并不支持这种情况，所以我已经提出了自己的关键帧，看起来好像好，但不是很完美。

我不想要一个需要任何其他JavaScript脚本的解决方案。 StackOverflow上的所有其他帖子都接受了JS解决方案。

在纯CSS3中实现弹性缓动的最佳方法是什么？

到目前为止，这是我的工作，如果这对任何人都有帮助......

我为红色，绿色和蓝色等长矩形棱镜制作动画。我通过硬编码以下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's blog post非常清楚。

Answer 2

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

http://easings.net/

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

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

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

2 个答案: