在过去，设计师负责设计，程序员负责编码。他们间互不干涉。但随着 CSS 中 transitions 和 animations 的到来，设计和编码的界限模糊了。设计师描述设计，而程序员把设计师的描述翻译成具体代码–这种合作模式不再像过去那么简单。为了高效地协作，设计师必须懂点代码，而程序员必须懂点设计。
举个例子，假设一位设计师要求开发人员实现一个如下所示的盒子反弹动画，在没有跨界知识和通用标准表述的情况下，设计师和程序员的沟通会有少许信息丢失。程序员没有足够的信息去了解设计师的意图，设计师也不知道他们到底可以选择什么。这样的沟通会有信息缺失，你最后完成的效果可能是下面这样的：
这样的效果并不会令人兴奋。虽然这已经符合动画效果的基本标准，但我们绝对可以做得更好。
首先要看的是 animation-timing-function 属性。在上面的例子中，我们对此属性赋值 linear，这意味着盒子以相同的速度不断运动。在某些情况下，这是可取的；然而，在现实世界中，运动通常不是线性的。
一个简单的解决方法是改变 animation-timing-function 属性。这使得每个动画的开始部分和结束部分比中间部分稍慢，这会令一些动画更自然。以下是启用了缓动功能的方块：
这只是一个小小的改进，所以我们仍有很多工作要做。同一时间内一次又一次地出现相同的动画，令方块看起来仍然机械又僵硬。在反弹之间增加一点点延迟，可让动画看起来更自然些：
现在这个动画看起来就像盒子自己在跳跃，而不是简单地被上下移动。跳跃之间有一点蓄力和停滞，模仿了活着的生物做同样的事情时会有的表现。尽管我们没有提供盒子跳跃的设计参考，但我们都对生物跳跃的表现有很好的了解。我们知道真实跳跃是什么样子，通过模仿，动画可以更自然。我们可以做更多的事情来让这种感觉变得更加突出。
如果你看动画片，你会注意到一些现实生活中的动作往往会被夸大、漫画化。做得好的话，这些动作就像在真实世界中一样自然，还带了些特有的魅力和个性。
在这个阶段，设计师和开发者之间的合作是至关重要的 – 但许多设计师可能都不知道这些选择的存在，所以得提醒开发人员将这些选择提供给设计人员。
通过在方块上添加一些轻微的变形，我们可以令动画丰满许多：
现在，盒子是一个活着的角色。仍有很多事情需要调整，但这已经比原来的动画更进一步 – 以一种非常好的方式。
现在我们更进一步，在跳跃结束时添加一点反弹：
第二次反弹让盒子看起来更有活着的感觉，但似乎仍然缺失了些东西。与其他成熟动画相比，这个反弹看起来很僵硬。我们需要再添加一点扭动：
最终的微妙变形使得反弹看起来更加自然。总体而言，第一个例子中我们的基本线性反弹有了巨大的改善。
这正是我们正在寻找的东西，但我们仍可以用定制的三次 Bézier 曲线进一步调整移动速率：
如果设计人员和开发人员不都了解基本的动画原理和控制方式，那就不可能做出生动的动画。这篇文章只是抓住了这两个领域一些浅显的地方。如果您是网页设计师或与设计师合作的网页开发人员，我强烈建议您阅读这两个领域的内容。
对于动画原则，奥利约翰斯顿和弗兰克托马斯的《The Illusion of Life: Disney Animation》是一本伟大的入门书籍。学会关于动画原则的通用语言后，设计人员和开发人员之间的沟通和协作将变得更加容易。
对于 CSS 动画的控制和变化，其可能性几乎是无止境的，因为延迟和计时很容易调整。如前所述，如果您不喜欢现成的易用的定时功能，则可以使用 cubic-bezier()来创建自己的定时功能。您还可以对动画做出调整，使其更接近于漫画或更接近于现实。重要的是，设计师和开发人员都要考虑这些变化，而不是盲目地沟通且不考虑用户体验。互相共享知识和互相协作可以将简单的动画变成很棒的动画。
原文：https://css-tricks.com/making-css-animations-feel-natural/
译者：evanyan
