如何创建CSS3反弹效果

Question

我试图在动画结束时创建一个反弹效果,而不使用任何第三方代码或javascript.我不知道如何只使用纯CSS来做到这一点.

这是我到目前为止:

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);
}

DEMO

Answer 1

如果您只需要一个非常简单的反弹,就像将转换函数更改ease-in为其他内容一样简单,例如a cubic-bezier.

cubic-bezier反弹功能的一个例子

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>

您可以在easings.net找到一些其他缓和的例子,或者在cubic-bezier.com找到一个完整的立方贝塞尔编辑器.