了解如何缓和和加强您的动画。
自然界中没有东西是从一点呈线性地移动到另一点的。现实中，物体在移动时往往会加速或减速。我们的大脑天生期待这种运动，因此在制作动画时，您应该充分利用这一点。自然的运动会让用户对您的应用感觉更舒适，从而产生更好的整体体验。
摘要
- 缓动使您的动画感觉更自然。
- 为界面元素选择缓出动画。
- 除非可以使动画保持简短，否则应避免使用缓入或缓入缓出动画；往往会让最终用户感觉迟钝。
在经典动画中，缓慢开始然后加速的动画是“慢入”，而对于快速开始并减速的运动，则为“慢速”。网络上对于这些场景最常用的术语分别是“缓入”和“缓出”。有时两种动画相组合，称为“缓入缓出”。缓动实际上是使动画不那么生硬或生长的过程。
缓和关键字
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;