CSS3中的弹性缓动，最佳方法 [英] Elastic easing in CSS3, best approach

问题描述

我想在CSS3中模仿弹性缓动功能。 CSS3不支持这个本机，所以我一直在想出我自己的关键帧，它看起来好，但不是完全自然。

I'd like to emulate an elastic easing function in CSS3. CSS3 does not support this natively, so I've been coming up with my own keyframes, and it looks okay, but not perfectly natural.

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

I do NOT want a solution that requires any additional JavaScript scripts. All of the other posts on StackOverflow have JS solutions accepted.

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

What's the best way to implement elastic easing in pure CSS3?

这是我的工作，如果这帮助任何人...

Here's my work so far, if that helps anybody...

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

我动画的是红色，绿色和蓝色等距矩形棱镜。我通过硬编码以下CSS3关键帧手动模拟弹性松动：

I'm animating the red, green, and blue isometric rectangular prisms. I've simulated an elastic easing manually by hardcoding the following CSS3 keyframes:

@include keyframes(popup) {
  0% {

  }

  20% {
    transform: translateY(-50px);
  }

  40% {
    transform: translateY(20px);
  }

  60% {
    transform: translateY(-6px);
  }

  90% {
    transform: translateY(0px);
  }

  100% {
    transform: translateY(0px);
  }
}

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

I'm not looking for suggestions on tweaking this code, I'd like to know if there's a better solution than hard coding.

推荐答案

根据浏览器的限制're使用CSS3你应该确定不管），你可以实际应用缓动过渡与 cubic-bezier（）关键字。

Depending on your browser limitations (and if you're using CSS3 you should be ok regardless), you can actually apply easing transitions with the cubic-bezier() keyword instead.

示例动画将如下所示：

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

Lea Verou的博客帖子涵盖了这很好。

这篇关于CSS3中的弹性缓动，最佳方法的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！