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.

我想在CSS3中模拟一个弹性宽松函数。CSS3本身并不支持这一点，所以我已经提出了自己的关键帧，它看起来不错，但并不完全自然。

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

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

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

在纯CSS3中实施弹性宽松的最佳方式是什么？

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

这是我迄今为止的工作，如果这对任何人都有帮助的话。。。

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

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

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

我正在设置红色、绿色和蓝色等轴测矩形棱镜的动画。我通过硬编码以下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);
  }
}

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

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

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.

根据您的浏览器限制（如果您使用CSS3，则无论如何都应该可以），您实际上可以使用cubic-bezier（）关键字应用缓和过渡。

An example animation would look like this:

示例动画如下所示：

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

Lea Verou's blog post covers this pretty well.

Lea Verou的博客文章很好地涵盖了这一点。

If you are creating a keyframe animation you must use animation-timing-function instead.

如果要创建关键帧动画，则必须使用动画计时功能。

Lots of great cubic-bezier transitions available here:

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

http://easings.net/

http://easings.net/

Something like this might be what you want:

你可能想要这样的东西：

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

The only way to do an elastic easing in pure CSS is by hard-coding a keyframes animation, like you did.

The main problem with this approach is that the animation may look rough. To make it smoother, you just have to add more key frames. But then, the payload increases a little bit.

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

If you compare this approach with using a JavaScript library, a library lets make smoother and preciser animations, but the payload is way heavier because you have to use an entire library.

如果将这种方法与使用JavaScript库进行比较，则库可以制作更平滑、更精确的动画，但由于必须使用整个库，因此负载要重得多。

So, for some short transitions, it's fine to use hard-coded key frames animations.

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

It can be tricky to make the key frames, so I suggest using a tool for that. This is the only I know of:
https://easyeasings.mauri.app/

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

Edit: There's a CSS proposal to create this kind of easings: https://github.com/w3c/csswg-drafts/pull/6533

As other answers have mentioned, using keyframes, is usually somewhat, janky.

正如其他答案所提到的，使用关键帧通常有点刺耳。

Other bezier solutions have been posted, but I find them unconvincing visually.

其他bezier解决方案已经发布，但我发现它们在视觉上难以令人信服。

There's a limit with what can be acheived, however, I find this curve to be a pretty convincing elastic ease out.

然而，我发现这条曲线是一条非常有说服力的弹性缓和曲线。

    transition: transform 500ms
                cubic-bezier(0.5, 1.8, 0.3, 0.8);

Note the pronounced P2(1.8) gives the initial movement an exaggerated over bounce, typical of simulated elasticity. You can experiment with the value of P2 to tweak the effect.

注意，明显的P2（1.8）使初始运动产生了一种夸张的过度弹跳，这是模拟弹性的典型表现。您可以尝试使用P2的值来调整效果。

I use the effect here on the coverage report graph "zoom in / out"

我在覆盖率报告图上使用此处的效果“放大/缩小”