前言
本文主要介绍了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 参考规范】，可以转发朋友圈和你的朋友分享哦。
网友评论