css - CSS3 中的 flex 缓动，最佳方法

Question

我想模拟一个 elastic easing function在 CSS3 中。 CSS3 本身不支持这一点，所以我一直在想出我自己的关键帧，它看起来还可以，但不是很自然。

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

在纯 CSS3 中实现 flex 缓动的最佳方式是什么？

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

https://jsfiddle.net/407rhhnL/1/

我正在为红色、绿色和蓝色等距直 Angular 棱镜制作动画。我通过硬编码以下 CSS3 关键帧手动模拟了 flex 缓动:

@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很好地涵盖了这一点。