前言

本文主要介绍了CSS3动画基本原理和常用形式

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

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

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

本文会逐个介绍这十二个原则，并讨论它们怎样运用在网页中。你能在 Codepen 找到它们 戳这里。

十二原则

• 挤压和拉伸 (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)

声明

如果一篇文章将所有的原则统统写完(不过有这样需求的人可以 阅读原文——来自微信开发社区 Monica)，显得整篇文章会很臃肿，而且也不利于阅读，所以我将十二原则拆分成十二篇文章来分享。虽是拆分开了，但一定会保证文章的连续性。对于已经发布的原则，我会把上面的无序列表项变为可点击状态，方便大家点击查看。

看完文章，还有福利拿哦，往下看
感兴趣的小伙伴可以在公号【grain先森】后台回复【190315】获取【CSS 参考规范】，可以转发朋友圈和你的朋友分享哦。

本文同步分享在 博客“grain先森”（JianShu）。
如有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。