CSS3 中的弹性缓动，最佳方法

Question

我想在 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);
  }
}

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

Answer 1

在纯 CSS 中进行弹性缓动的唯一方法是硬编码 keyframes 动画，就像您所做的那样。

这种方法的主要问题是动画可能看起来很粗糙。为了使其更平滑，您只需添加更多关键帧。但随后，有效载荷增加了一点。

如果您将这种方法与使用 JavaScript 库进行比较，库可以制作更流畅和更精确的动画，但有效负载要重得多，因为您必须使用整个库。

所以，对于一些短暂的过渡，使用硬编码的关键帧动画是可以的。

制作关键帧可能很棘手，所以我建议使用工具。这是我唯一知道的： https://easyeasings.com/

编辑：有一个创建这种缓动的 CSS 提案：https://github.com/w3c/csswg-drafts/pull/6533

Answer 2

这里有很多很棒的三次贝塞尔转换：

http://easings.net/

这样的东西可能就是你想要的：

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

Answer 3

根据您的浏览器限制（如果您使用的是 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 很好地涵盖了这一点。