相关疑难解决方法(0)

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

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