我正在尝试在动画的末尾添加反弹效果，而不使用任何第三方代码或JavaScript。我设法创建了动画，但无法达到弹跳效果。
到目前为止，这是我所做的：
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。
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。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句