作为前端的设计师和工程师，我们用 CSS 去做样式、定位并创建出好看的网站。我们经常用 CSS 去添加页面的运动过渡效果甚至动画，但我们经常做的东西不会超过这些。

动效是一个有助于访客和消费者理解我们设计的强有力工具。这里有些原则能最大限度地应用在我们的工作中。

迪士尼经过基础工作练习的长时间累积，在 1981 年出版的 The Illusion of Life: Disney Animation 一书中发表了动画的十二个原则 (12 Principles of Animation) 。这些原则描述了动画能怎样用于让观众相信自己沉浸在现实世界中。

一、挤压和拉伸 (Squash and stretch)

二、预备动作 (Anticipation)

三、演出布局 (Staging)

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

五、跟随和重叠动作 (Follow Through and Overlapping Action)

六、缓入缓出 (Slow In and Slow Out)

七、弧线运动 (Arc)

八、次要动作 (Secondary Action)

九、时间节奏 (Timing)

十、夸张手法 (Exaggeration)

十一、扎实的描绘 (Solid drawing)

十二、吸引力 (Appeal)

https://mp.weixin.qq.com/s/0Al7HyHyPl7xDOsf92ZlsQ