CSS弹跳动画

回弹效果是指当一个过渡达到最终值时,往回 倒一点,然后再次回到最终值,如此往复一次或多次,并逐渐收敛,最终稳 定在最终值。举个例子,假设要用一个元素来模拟一个下落的小球如下图,我们会把 transform 属性1从 none 过渡到translateY(350px) 来模 拟这个下落过程。 

实际上,回弹效果并不只对位移动画有帮助。对几乎所有类型的过渡动 画来说,它都可以显著增强动画的体验,其中包括:尺寸变化(比如:元素在 :hover 时变大,弹出框从 transform: scale(0) 的状态开始放大显示,柱状图中的每根柱子动态地冒出 来,等等) 角度变化(比如:元素的旋转动作,饼图中的各个扇区以动画的方 式从 0°开始展开为实际大小,等等)

这里通过css的动画实现如下图所示的回弹效果

 

实现小球弹跳的css代码如下：

 

实现的效果小球从上向下弹跳，如下图所示：