如何创建CSS3反弹效果

本文介绍了如何创建CSS3反弹效果的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试在动画的末尾添加反弹效果，而不使用任何第三方代码或javascript。我设法创建了动画，但是无法实现反弹效果。

I am trying to add a bounce effect to the end of the animation without using any 3rd party code or javascript. I managed to create the animation but could not achieve the bounce effect.

这是我到目前为止所做的：

This is what I have done so far:

HTML：

<div></div>
<div></div>
<div></div>

CSS：

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s ease-in;
    transform-origin: top left;
}
div:hover { 
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

推荐答案

如果您需要的是弹跳非常简单，就像将过渡功能从 ease-in 更改为其他功能（如 cubic-bezier 。

If all you need is a very simple bounce, it's as easy as just changing the transition function from ease-in to something else, such as a cubic-bezier.

一个会反弹的 cubic-bezier 函数的示例为

An example of a cubic-bezier function that bounces would be

cubic-bezier(0.175, 0.885, 0.32, 1.275)

完整示例：

div {
    background:  tomato;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-origin: top left;
}
div:hover {
    -webkit-transform: scale3d(5, 5, 5);
    transform: scale3d(5);
}

<div></div>
<div></div>
<div></div>

您可以在或完整的三次贝塞尔曲线编辑器中找到一些其他宽松的示例在。

You can find a few examples of other easings at easings.net, or a full cubic-bezier editor at cubic-bezier.com.

                        这篇关于如何创建CSS3反弹效果的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

Bezier