了解如何缓和和加强您的动画。
自然界中没有东西是从一点呈线性地移动到另一点。现实中，物体在移动时往往会加速或减速。我们的大脑习惯于期待这种运动，因此在做动画时，应利用此规律。自然的运动会让用户对您的应用感觉更舒适，从而产生更好的总体体验。
摘要
- 缓动使您的动画感觉更自然。
- 为界面元素选择缓出动画。
- 避免缓入或缓入缓出动画，除非可以使其保持简短；这类动画会让最终用户感觉很迟钝。
在经典动画中，缓慢开始然后加速的动画的术语是“慢入”，快速开始然后减速的动画是“慢出”。网络上对于这些动画最常用的术语分别是“缓入”和“缓出”。有时两种动画相组合，称为“缓入缓出”。缓动实际上是使动画不再那么尖锐或生硬的过程。
缓动关键字
CSS 变换和动画都允许您选择要为动画使用的缓动类型。您可以使用影响相关动画的缓动（或有时称为 timing）的关键字。您还可以完全自定义您的缓动，借此方式更自由地表达应用的个性。
以下是可在 CSS 中使用的一些关键字：
linearease-inease-outease-in-out
资料来源：CSS 变换，W3C
还可以使用 steps 关键字，它允许您创建具有离散步骤的变换，但上面列出的关键字对于创建感觉自然的动画最有用。
线性动画
没有任何缓动的动画称为线性动画。线性转换的图形如下所示：
随着时间推移，其值以等量增加。采用线性运动时，内容往往显得很僵硬，不自然，让用户觉得不协调。一般来说，应避免线性运动。
不管通过 CSS 还是 JavaScript 来编写动画代码，您将发现始终有线性运动的选项。
如需使用 CSS 实现上述效果，代码将类似下面这样：
transition: transform 500ms linear;
缓出动画
缓出使动画在开头处比线性动画更快，还会在结尾处减速。
缓出一般最适合界面，因为开头时快速使动画有反应快的感觉，同时在结尾仍允许有一点自然的减速。
有很多方法来实现缓出效果，但最简单的方法是 CSS 中的 ease-out 关键字：
transition: transform 500ms ease-out;
缓入动画
缓入动画开头慢结尾快，与缓出动画正好相反。
这种动画就像沉重的石头掉落一样，开始时很慢，然后快速地重重撞击地面，突然沉寂下来。
但是，从交互的角度来看，缓入可能让人感觉有点不寻常，因为结尾很突然；在现实中移动的物体往往是减速，而不是突然停止。缓入还有一种不利影响，即让人感觉行动迟缓，这会对网站或应用的响应速度给人的感觉产生负面影响。
要使用缓入动画，与缓出和线性动画类似，可以使用其关键字：
transition: transform 500ms ease-in;
缓入缓出动画
缓入并缓出与汽车加速和减速相似，使用得当时，可以实现比单纯缓出更生动的效果。
不要使用过长的动画时长，因为缓入开头让动画显得迟缓。300-500 毫秒的时间范围通常比较合适，但实际的数量主要取决于项目的感觉。也就是说，由于开头慢、中间快和结尾慢，动画将有更强的对比，可能让用户感到非常满意。
要设置缓入缓出动画，可以使用 ease-in-out CSS 关键字：
transition: transform 500ms ease-in-out;