过渡与动画 - 缓动效果之弹性动画弹性过渡

难题

给过渡和动画加上缓动效果是一种常见的手法（比如具有回弹效果的过渡过程）是一种流行的表现手法，可以让界面显得更加生动和真实：在现实世界中，物体A点到B点往往也是不完全匀速的

以纯技术的角度来看，回弹效果是指当一个过渡达到最终值时，往回到一点，然后再次回到最终值，如此往复一次或者多次，并逐渐收敛，最终稳定在最终值。有相当的多JavaScript类库可以创建动画，且内置回弹效果等其他缓动效果。但是眼下，我们其实已经不需要借助脚本来实现过渡和动画了。不过，在CSS中实现回弹效果的最佳方式是什么呢？

弹跳动画

我们的第一感觉可能就是使用css动画，并且设置如下关键帧：

@keyframes bounce{60%,80%,to{transform:translateY(350px);}70%{transform:translateY(250px);}90%{transform:translateY(300px);}
}

相信我们都做过这样的事，但是我们跑一遍这个动画，会发现它显示的及其不真实，主要原因在于，每当这个小球方向改变时，她得移动过程都是持续加速的，这看起来很不自然。原因其实就是因为它的调速函数在关键帧的衔接都是一样的

所有的过渡和动画之间都是跟一条曲线有关的，这条曲线指定了动画过程在整段时间中是如何推进的。

如果不指定调速函数，就是得到一个默认值。但是这个默认值并不是我们想象中的匀速效果，而是：

注意，当时间进行到一半时，这个过渡已经推进到80%.

说到调速函数,我们很自然联系到了css内置的缓动曲线和贝塞尔曲线。

不论是在animation/transition简写属性中，还是在animation-timing-function/transition-timing-function展开属性中，你都可以把这个默认的调速函数显示指定ease关键字。除了ease外，还有四种内置的缓动曲线，你可以借助他们来改变动画的推进方式

从上面四个图中，我们很直观的看出，ease-out是ease-in的反向版本。而这一对组合正是实现回弹效果所需要的：