了解如何让动画更柔和、更有分量感。
自然界中没有任何事物是从一个点线性移动到另一个点的。在现实中，物体在移动时往往会加速或减速。我们的大脑天生就会预期这种运动，因此在制作动画时，您应该利用这一点。自然的运动效果可让用户在使用应用时感到更舒适，从而提升整体体验。
摘要
- 加/减速可让动画感觉更自然。
- 为界面元素选择缓出动画。
- 避免使用慢入或慢入慢出动画，除非您可以让它们保持简短；它们往往会让最终用户感到迟缓。
在传统动画中，开始时速度慢、之后加速的运动称为“慢入”，开始时速度快、之后减速的运动称为“慢出”。在网络上，这些效果最常用的术语分别是“缓入”和“缓出”。有时，两者会结合使用，称为“缓入缓出”。因此，缓动实际上是让动画不那么剧烈或明显的过程。
缓动关键字
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;