原文地址：https://developers.google.com/web/fundamentals/look-and-feel/animation...
自然界中没有东西是从一个点线性地移动到另一点。 在现实中，事物在运动时可能加速或减速。 我们的大脑习惯于期待这种运动，因此在做动画时，应利用此规律。 自然的运动会让用户对你的应用感觉更舒服，从而产生更好的体验效果。
Tip:
- 缓动会让你的动画看起来更加自然
- 为UI元素选择缓出（ease-out）动画
- 避免缓入（ease-in）或者缓入缓出（ease-in-out）动画，除非你能让其保持简短；这种动画会让用户觉得反应迟钝
在经典的动画中，缓慢开始然后加速称为“慢入”(slow in)，开始很快然后减速称为“慢出”（slow out），然而网上最常见的叫法是“缓入”（ease in）和“缓出”（ease out）。有时候两者结合叫做“缓入缓出”（ease in out）。缓动可以使动画不再那么生硬。
缓动的关键字
CSS transition和animation都能够让你去选择一种缓动类型来用于动画中。你可以使用影响动画缓动的关键字。你可以完全自定义你的缓动效果，这使得你能够更加自由的改善自己的应用。
下面是你能在CSS里用到的一些关键字：
- linear
- ease-in
- ease-out
- ease-in-out
你也可以使用steps关键字，它能让你创建具有步骤的变换，但上面列出的关键字都是最有用的，能够创造出自然的动画效果，这就是你所需要的。
线性动画
没有任何缓动效果的动画就是线性动画，线性变换的图如下：
随时间增长，值会等量增长。线性运动的物体看起来很像机器人不自然，这也是用户会觉得不自然的效果。总之你需要避免使用线性运动。
不管你用CSS还是JS来实现动画，你会发现总会有一个选项是linear的。如果用CSS来实现上述效果，代码如下：
transition: transform 500ms linear;
缓出（ease-out）动画
缓出导致动画开始时比线性运动要快，然后在快结束时减速
有很多种方法来实现缓出效果，最简单的就是CSS里的ease-out关键字了：
transition: transform 500ms ease-out;
缓出效果非常适合用户界面，因为在开始快速回让动画有反应快的感觉，结束时有自然的减速。
缓入（ease-in）动画
与缓出相反，缓入开始慢，结束快。
这种动画像很重的石头掉下来一样，开始很慢，然后快速撞击地面并迅速沉寂。
与缓出和线性动画类似，要想使用缓入动画，可以直接使用关键字：
transition: transform 500ms ease-in;
然而从交互的角度看，缓入会让人觉得有些不寻常，因为它在结尾很突然的沉寂。真实世界里的事物常常是减速，而不是突然停止。缓入还会让人感觉行动迟缓，让人对网站的响应速度产生不好的影响。
缓入缓出（ease-in-out）动画
缓入缓出与汽车的加速减速类似，使用恰当的时候，会比单独使用缓出有更好的效果。
需要注意的是，因为开始缓入会让动画有迟钝的感觉，所以缓入的时间不要太长，一般在300~500ms较为合适，其实很大程度上会根据项目来选择合适的数字。缓入缓出由于开始慢，中间加速，结束慢，所以会使得整个动画有非常强烈的对比，用户可能会感到比较满意。
设置缓入缓出动画可以使用ease-in-outCSS关键字：
transition: transform 500ms ease-in-out;
