挤压和拉伸的目的是为绘制的对象赋予重量感和灵活性。它可以应用于简单的物体，如弹跳球，或更复杂的结构，如人脸的肌肉组织。

应用在动画中，这一原则最重要的方面是对象的体积在被挤压或拉伸时不会改变。如果一个球的长度被垂直拉伸，它的宽度（三个维度，还有它的深度）需要相应地水平收缩。

看看上面这张图，很明显右边这个运动轨迹要比左边的真实很多。

原理动画如下：

类似的一些比较有意思的 Web 动画 DEMO：

CodePen Demo -- CSS Flippy Loader ? By Jhey

仔细看上面这个 Loading 动画，每个块在跳起之前都会有一个压缩准备动作，在压缩的过程中高度变低，宽度变宽，这就是挤压和拉伸，让动画看上去更加真实。

OK，再看两个类似的效果，加深下印象：

CodePen Demo -- CSS Loading Animation

CodePen Demo -- CSS Animation Loader - Jelly Box

简单总结一下，挤压和拉伸的核心在于保持对象的体积一致，当拉伸元素时，它的宽度需要变薄，而当挤压元素时，它的宽度需要变宽。

Anticipation -- 预备动作

准备动作用于为主要的动画动作做好准备，并使动作看起来更逼真。

譬如从地板上跳下来的舞者必须先弯曲膝盖，挥杆的高尔夫球手必须先将球杆向后挥动。

原理动画如下，能够看到滚动之前的一些准备动作：

看看一些实际应用的chang场景，下面这个动画效果：

CodePen Demo -- Never-ending box By Pawel

小球向上滚动，但是仔细看的话，每次向上滚动的时候都会先向后摆一下，可以理解为是一个蓄力动作，也就是我们说的准备动作。

类似的，看看这个购物车动画，运用了非常多的小技巧，其中之一就是，车在向前冲之前会后退一点点进行一个蓄力动作，整个动画的感觉明显就不一样，它让动画看起来更加的自然：

Staging -- 演出布局

Staging 意为演出布局，它的目的是引导观众的注意力，并明确一个场景中什么是最重要的。

可以通过多种方式来完成，例如在画面中放置角色、使用光影，或相机的角度和位置。该原则的本质是关注核心内容，避免其他不必要的细节吸引走用户的注意力。

原理动画如下：

上述 Gif 原理图效果不太明显，看看示例效果：

CodePen Demo -- CSS Loading Animation

该技巧的核心就是在动画的过程中把主体凸显，把非主体元素通过模糊、变淡等方式弱化其效果，降低用户在其之上的注意力。

Straight-Ahead Action and Pose-to-Pose -- 连续运动和姿态对应

其实表示的就是逐帧动画和补间动画：

• FrameAnimation（逐帧动画）：将多张图片组合起来进行播放，可以利用 CSS Aniation 的 Steps，画面由一帧一帧构成，类似于漫画书
• TweenAnimation（补间动画）：补间动画是在时间帧上进行关键帧绘制，不同于逐帧动画的每一帧都是关键帧，补间动画可以在一个关键帧上绘制一个基础形状，然后在时间帧上对另一个关键帧进行形状转变或绘制另一个形状等，然后中间的动画过程是由计算机自动生成。

这个应该是属于最基础的了，在不同场景下有不同的妙用。我们在用 CSS 实现动画的过程中，使用的比较多的应该是补间动画，逐帧动画也很有意思，譬如设计师设计好的复杂动画，利用多张图片拼接成逐帧动画也非常不错。

逐帧动画和补间动画适用在不同的场合，没有谁更好，只有谁更合适，比较下面两个时钟动画，其中一个的秒针运用的是逐帧动画，另外一个则是补间动画：

• 时钟秒针运用的是逐帧动画：

CodePen Demo -- CSS3 Working Clock By Ilia

• 时钟秒针运用的是补间动画：

CodePen Demo -- CSS Rotary Clock By Jake Albaugh

有的时候一些复杂动画无法使用 CSS 直接实现的，也会利用逐帧的效果近似实现一个补间动画，像是苹果这个耳机动画，就是实际逐帧动画，但是看起来是连续的：

CodePen Demo -- Apple AirPods Pro Animation (final demo) By Blake Bowen

这里其实是多张图片的快速轮播，每张图片表示一个关键帧。

Follow through and overlapping action 跟随和重叠动作

跟随和重叠动作是两种密切相关的技术的总称，它们有助于更真实地渲染运动，并有助于给人一种印象，即运动的元素遵循物理定律，包括惯性原理。

• 跟随意味着在角色停止后，身体松散连接的部分应该继续移动，并且这些部分应该继续移动到角色停止的点之外，然后才被拉回到重心或表现出不同的程度的振荡阻尼；
• 重叠动作是元素各部分以不同速率移动的趋势（手臂将在头部的不同时间移动等等）；
• 第三种相关技术是拖动，元素开始移动，其中一部分需要几帧才能追上。

要创造一个重叠动作的感觉，我们可以让元件以稍微不同的速度移动到每处。这是一种在 iOS 系统的视窗过渡中被运用得很好的方法。一些按钮和元件以不同速率运动，整体效果会比全部东西以相同速率运动要更逼真，并留出时间让访客去适当理解变化。

原理示意图：

看看下面这个购物车动画，仔细看购物车，在移动到停止的过程中，有个很明显的刹车再拉回的感觉，这里运用到了跟随的效果，让动画更加生动真实：

Slow In and Slow Out -- 缓入缓出

现实世界中物体的运动，如人体、动物、车辆等，需要时间来加速和减速。

真实的运动效果，它的缓动函数一定不是 Linear。出于这个原因，运动往往是逐步加速并在停止前变慢，实现一个慢进和慢出的效果，以贴近更逼真的动作。

示意图：

这个还是很好理解的。真实世界中，很少有缓动函数是 Linear 的运动。

Arc -- 弧线运动

大多数自然动作倾向于遵循一个拱形轨迹，动画应该遵循这个原则，遵循隐含的弧形以获得更大的真实感。

原理示意图：

嗯哼，在很多动画中，使用弧线代替直线，能够让动画效果更佳的逼真。看看下面这个烟花粒子动画：

CodePen Demo -- Particles, humankind's only weakness By Rik Schennink

整个烟花粒子动画看上去非常的自然，因为每个粒子的下落都遵循了自由落体的规律，它们的运动轨迹都是弧线而不是直线。

Secondary Action -- 次要动作

将次要动作添加到主要动作可以使场景更加生动，并有助于支持主要动作。走路的人可以同时摆动手臂或将手臂放在口袋里，说话或吹口哨，或者通过面部表情来表达情绪。

原理示意图：

简单的一个应用实例，看看下面这个动画：

CodePen Demo -- Submarine Animation (Pure CSS) By Akhil Sai Ram

这里实现了一个潜艇向前游动的画面，动画本身还有很多可以优化的地方。但也有一些值得学习肯定的地方，动画使用了尾浆转动和气泡和海底景物移动。

同时，值得注意的是，窗口的反光也是一个很小的细节，表示船体在移动，这个就属于一个次要动作，衬托出主体的移动。

再看看下面这打印动画，键盘上按键的上上下下模拟了点击效果，其实也是个次要动作，衬托主体动画效果：

CodePen Demo -- CSS Typewriter By Aaron Iker

Timing -- 时间节奏

时间是指给定动作的绘图或帧数，它转化为动画动作的速度。

在纯粹的物理层面上，正确的计时会使物体看起来遵守物理定律。例如，物体的重量决定了它对推动力的反应，因为重量轻的物体会比重量大的物体反应更快。

同一个动画，使用不同的速率展示，其效果往往相差很多。对于 Web 动画而言，可能只需要调整 animation-duration 或 transition-duration 的值。

原理示意图：

可以看出，同个动画，不同的缓动函数，或者赋予不同的时间，就能产生很不一样的效果。

当然，时间节奏可以运用在很多地方，譬如在一些 Loading 动画中：

CodePen Demo -- Only Css 3D Cube By Hisami Kurita

又或者是这样，同个动画，不同的速率：

CodePen Demo -- Rotating Circles Preloader

也可以是同样的延迟、同样的速率，但是不同的方向：

CodePen Demo -- 2020 SVG Animation By @keyframers

Exaggeration -- 夸张手法

夸张是一种对动画特别有用的效果，因为力求完美模仿现实的动画动作可能看起来是静态和沉闷的。

使用夸张时，一定程度的克制很重要。如果一个场景包含多个元素，则应平衡这些元素之间的关系，以避免混淆或吓倒观众。

原理示意图：

OK，不同程度的展现对效果的感官是不一样的，对比下面两个故障艺术动画：

轻微晃动故障：

严重晃动故障：

CodePen Demo -- Glitch Animation

可以看出，第二个动画明显能感受到比第一个更严重的故障。

过多的现实主义会毁掉动画，或者说让它缺乏吸引力，使其显得静态和乏味。相反，为元素对象添加一些夸张，使它们更具活力，能够让它们更吸引眼球。

Solid drawing -- 扎实的描绘

这个原则表示我们的动画需要尊重真实性，譬如一个 3D 立体绘图，就需要考虑元素在三维空间中的形式。

了解掌握三维形状、解剖学、重量、平衡、光影等的基础知识。有助于我们绘制出更为逼真的动画效果。

原理示意图：

再再看看下面这个动画，名为 Close the blinds -- 关上百叶窗：

CodePen Demo -- Close the blinds By Chance Squires

hover 的时候有一个关上动画，使用多块 div 模拟了百叶窗的落下，同时配合了背景色从明亮到黑暗的过程，很好的利用了色彩光影辅助动画的展示。

再看看这个摆锤小动画，也是非常好的使用了光影、视角元素：

CodePen Demo -- The Three-Body Problem By Vian Esterhuizen

最后这个 Demo，虽然是使用 CSS 实现的，但是也尽可能的还原模拟了现实中纸张飞舞的形态，并且对纸张下方阴影的变化也做了一定的变化：

CodePen Demo -- D CSS-only flying page animation tutorial By @keyframers

好的动画，细节是经得起推敲的。