回弹效果是指当一个过渡达到最终值时,往回倒一点,然后再次回到最终值,如此往复一次或多次,并逐渐收敛,最终稳定在最终值。举个例子,假设要用一个元素来模拟一个下落的小球如下图,我们会把transform属性1从none过渡到translateY(350px)来模拟这个下落过程。
实际上,回弹效果并不只对位移动画有帮助。对几乎所有类型的过渡动画来说,它都可以显著增强动画的体验,其中包括:尺寸变化(比如:元素在:hover时变大,弹出框从transform: scale(0)的状态开始放大显示,柱状图中的每根柱子动态地冒出来,等等)角度变化(比如:元素的旋转动作,饼图中的各个扇区以动画的方式从0°开始展开为实际大小,等等)
这里通过css的动画实现如下图所示的回弹效果
实现小球弹跳的css代码如下：
实现的效果小球从上向下弹跳，如下图所示：
