过去，设计师负责设计，而程序员负责编码。两者之间没有交叉，这就是 当时的情况。但随着 CSS 过渡 和 动画 的出现，这些界限变得模糊。不再是设计师决定设计，程序员进行转录——设计师现在必须了解一些代码知识，程序员必须了解一些设计知识才能有效地合作。
例如，假设设计师要求开发人员让一个盒子弹跳。就这样——没有其他指示。如果没有一些交叉知识和共同的词汇，双方都会在这项沟通中迷失方向：开发人员没有足够的 information 来完全实现设计师的愿景，但设计师并不真正知道有哪些选项以及如何传达这些选项。使用最基本的解释，您可能会得到如下所示的结果：
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 1。
并不令人兴奋。不过，公平地说，这确实符合给定的所有条件。然而，我们绝对可以做得比这更好。
首先要查看的是时序函数。在上面的示例中，我们使用的是线性时序函数，这意味着盒子始终以相同的速度移动。在某些情况下，这是可取的；但是，在现实世界中，运动通常不会以这种方式进行。
一个简单的解决方法是将时序函数更改为 ease。这使得每个动画的开始和结束比中间部分稍微慢一些，这使得某些动画看起来更加自然。以下是启用了缓动函数的盒子：
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 2。
这算是一点改进，但还有很多工作要做。盒子看起来仍然很机械和僵硬，相同的动画在相同的时间范围内不断重复。在弹跳之间添加一个轻微的延迟，可以添加一些视觉对比，这看起来更加自然
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 3。
现在，盒子看起来像是在跳跃，而不是简单地上下移动。跳跃之间有一点加速和减速，这模拟了活物在收到相同指令时的表现。尽管我们没有关于弹跳盒子的参考，但我们都知道跳跃生物的样子。因为我们知道自然界中会发生什么，通过模仿，动画看起来更加自然。但我们可以做更多的事情让这种加速感更具重量。
如果您观看卡通，您会注意到自然运动通常是夸张的，创造出现实生活的漫画。如果做得好的话，这会让动画看起来与现实世界一样自然，而且还增加了给动画注入一些魅力和个性的额外好处。
在此阶段，设计师和开发人员之间的协作至关重要，但许多设计师可能甚至没有意识到这些选项的存在。开发人员可能需要向设计师宣传这种可能性。
通过在盒子的比例上添加一些微妙的扭曲，我们可以为动画添加很多东西
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 4。
现在，盒子有了个性。它感觉像是活的。有很多东西可以调整，但这已经比最初的指令有了很大的进步——而且进步很大！
我们将在这一步的基础上更进一步，在跳跃结束时添加一点反弹
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 5。
第二次弹跳让它感觉更加生动，但还是感觉有些不对劲。与动画的其他部分相比，弹跳看起来很僵硬。我们需要像对加速那样添加另一部分扭曲
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 6。
在结束时添加的这种微妙的扭曲让反弹看起来更加自然。总的来说，与第一个示例中的基本线性弹跳相比，这是一个巨大的进步。
这可能是我们想要的，但可以使用自定义 三次贝塞尔 曲线对运动速率进行进一步的调整
查看 CodePen 上 Brandon Gregory (@pulpexploder) 的 弹跳盒子 7。
如果没有设计师和开发人员都了解基本的动画原理和控件，就无法实现这种级别的自定义。实际上，本文只是触及了这两个领域的表面。如果您是与设计师合作的网页设计师或网页开发人员，我强烈建议您阅读这两个领域的信息。
对于动画原理，奥利·约翰斯顿和弗兰克·托马斯合著的《生命的错觉：迪士尼动画》是关于如何让现实生活中的漫画看起来生动和真实的绝佳入门书。有了这种共同语言，设计师和开发人员之间的沟通和协作将变得更加容易。
对于 CSS 动画的技术控件和变体，可能性几乎是无限的。延迟和时序很容易调整。如前所述，如果您不喜欢开箱即用的 ease 时序函数，您可以使用 cubic-bezier() 创建自己的时序函数。您还可以调整想要让动画更接近或更远离现实的扭曲程度。重要的是，设计师和开发人员都在思考这些变体，而不是盲目地接受一切而不进行定制。共享的知识和协作可以将简单的动画转变为伟大的动画。
更多资源
- 12 个动画基本原则 – 维基百科文章概述了《生命的错觉》中介绍的概念。
- CSS 动画指南：原理和示例 – Smashing Magazine 文章提供有关 CSS 动画的全面指南。
- 设计系统中的动画 – Sarah Drasner 在 24 Ways 上发表的文章
- 动画属性 – CSS-Tricks 年鉴条目涵盖属性及其值
- 过渡属性 – CSS-Tricks 年鉴条目涵盖属性及其值
- CubicBezier.com – 使用用户界面创建自定义动画曲线的资源。
这是一个重要的主题，我很高兴像你这样的人在写这方面的内容。但是，作为一名自学成才的程序员和设计师，我对最终结果并不满意。它对我来说仍然感觉不像自然的运动，你仍然需要即兴发挥时序函数。作为 100 天 CSS 挑战的一部分，我做了一个类似的跳跃盒子，你可以在这里查看：https://codepen.io/roydigerhund/pen/jqJvWK
你的示例看起来很棒
我的天哪！你的示例太棒了！
Matze，太棒了！
很棒的文章。我一直很想学习这方面的技能，感谢你写这篇文章！
太好了！感谢你的评论！
生物是有弹性的。所以我想在盒子跳跃时添加一些扁圆形。相关的关键帧是
很好！这是我创建的用来预览它的笔
关于这一点，唯一仍然感觉不自然的是盒子下降速度在到达底部之前会减慢。对于真正的“弹跳”感觉，盒子的速度应该在下降结束时达到最大。否则，就像它在使用“空气制动器”一样。
是的，我同意。这种减速效果真的让我很困扰。
老实说，我只是想让着陆与跳跃形成镜像，也就是说，让盒子挤压到地板上而不是反弹。着陆时反弹意味着盒子是坚硬的，而跳跃意味着正好相反。
这有点离题，但我正在尝试为一个匹配游戏创建一个翻转效果，当卡片翻转时，它们会保持几秒钟，这样孩子就可以记住它然后再翻转回来。我尝试过使用“轻松进出”的不同时间，但它仍然翻转得过快。我可以添加暂停吗？
时间函数是“轻松进出”……也许这就是问题所在？总是一些小事……:-)
Richard，为此，最好使用关键帧动画，而不是使用自定义或其他时间函数。类似于以下内容
@keyframes cardFlip
{
0% { [基本状态] }
10% { [翻转状态] }
90% { [翻转状态] }
100% { [基本状态] }
}
当然，这不是可投入生产的代码，但希望它能让你走上正轨。
虽然可以通过纯 CSS 完成复杂的动画，但这往往不值得走纯 CSS 路线。最好使用像 GSAP 这样的 JS 动画引擎。
JS 动画引擎让你能够更好地控制动画，并且仍然具有很高的性能。
这是我最近构建的一个网站，它包含一些很酷的 GSAP 动画
http://annualreport.communications.gov.au/2017
我使用纯 CSS 制作了这个旧网站来运行动画（除了添加和删除类的一些 js 代码外），构建起来真是噩梦
http://annualreport.communications.gov.au/2014
（必须在桌面设备上查看才能看到动画）
对于简单的动画，请选择 CSS。对于复杂的动画，使用 GSAP 会更好。不过，你仍然需要了解诸如挤压和拉伸等基本的动画概念，才能制作出看起来不错的动画。
我总是会首先使用 CSS 动画，只有在无法通过 JS 动画时才会使用 JS。CSS 的性能会比类似的 JS 动画更好。
@Matze 不一定，在某些情况下，JS 动画的性能实际上会比 CSS 更好。
GSAP 撰写了一篇文章，将 CSS 和 JS 对比（当然，GSAP 会有所偏向，但它给人一种客观和诚实的感觉）
https://greensock.com/transitions
对于两个状态之间的简单过渡，请使用 CSS。
如果是一个中等复杂度的动画，而且只是一次性使用，请尝试使用 CSS。
如果是一个非常复杂的动画，或者你的网站到处都有中等复杂度的动画，请直接使用 JS 解决方案。
可汗学院有一些关于动画和移动的免费课程，来自皮克斯。
完美！！
易于阅读且非常有用，谢谢 :D
如果我们想模拟重力，盒子在到达顶部时应该减速，然后在返回底部时加速。我认为模拟重力的最佳方法是反转动画，使时间 0% 和 100% 处于最高点。使用“轻松进出”，它将在顶部移动最慢，在底部移动最快。尝试以下关键帧
好文章！谢谢！最近发现你也可以在关键帧中使用很多 animation-timing-function，以获得更多类似于 After Effects 的设置 https://codepen.io/boasthin/full/BJMWLq/