一反往常，精美的细节往往能非常好的吸引用户的注意力。
吸引力是艺术作品的特质，而如何实现有吸引力的作品则需要不断的尝试。
原理示意图：
我觉得这一点可能是 Web 动画的核心，一个能够吸引人的动画，它肯定是有某些特质的，让我们一起来欣赏下。
CodePen Demo -- Download interaction By Milan Raring
通过一连串的动作，动画展开、箭头移动、进度条填满、数字变化，把一个下载动画展示的非常 Nice，让人在等待的过程并不觉得枯燥。
再来看看这个视频播放的效果：
CodePen Demo -- Video button animation - Only CSS
通过一个遮罩 hover 放大，再到点击全屏的变化，一下子就将用户的注意力给吸引了过来。
Web 动画的一些常见误区
当然，上述的一些技巧源自于迪士尼动画原则，我们可以将其中的一些思想贯穿于我们的 Web 动画的设计之中。
但是，必须指出的是，Web 动画本身在使用的时候，也有一些原则是我们需要注意的。主要有下面几点：
- 增强动画与页面元素之间的关联性
- 不要为了动画而动画，要有目的性
- 动画不要过于缓慢，否则会阻碍交互
增强动画与页面元素之间的关联性
这个是一个常见的问题，经常会看到一些动画与主体之间没有关联性。关联性背后的逻辑，能帮助用户在界面布局中理解刚发生的变化，是什么导致了变化。
好的动画可以做到将页面的多个环节或者场景有效串联。
比较下面两个动画，第二个就比第一个更有关联性：
没有强关联性的：
有关联性的：
很明显，第二个动画比第一个动画更能让用户了解页面发生的变化。
不要为了动画而动画，要有目的性
这一点也很重要，不要为了动画而动画，要有目的性，很多时候很多页面的动画非常莫名其妙。
emm，简单一点来说就是单纯的为了炫技而存在的动画。这种动画可以存在于你的 Demo，你的个人网站中，但不太适合用于线上业务页面中。
使用动画应该有明确的目的性，譬如 Loading 动画能够让用户感知到页面正在发生变化，正在加载内容。
在我们的交互过程中，适当的增加过渡与动画，能够很好的让用户感知到页面的变化。类似的还有一些滚动动画。丝滑的滚动切换比突兀的内容明显是更好的体验。
动画不要过于缓慢，否则会阻碍交互
缓慢的动画，它产生了不必要的停顿。
一些用户会频繁看到它们的过渡动画，尽可能的保持简短。让动画持续时间保持在 300ms 或更短。
比较下面两个动画，第一次可能会让用户耳目一新，但是如果用户在浏览过程中频繁出现通过操作，过长的转场动画会消耗用户大量不必要的时间：
过长的转场动画：
缩短转场动画时间，保持恰当的时长：
结合产品及业务的创意交互动画
这一点是比较有意思的。我个人认为，Web 动画做得好用的妙，是能非常好的提升用户体验，提升品牌价值的。
结合产品及业务的创意动画，是需要挖掘，不断打磨的不断迭代的。譬如大家津津乐道的 BiliBili 官网，它的顶部 Banner，配合一些节日、活动，经常就会有出现一些有意思的创意交互动画。简单看两个：
以及这个：
我非常多次在不同地方看到有人讨论 Bilibili 的顶部 banner 动画，可见它这块的动画是成功的。很好的结合了一些节日、实事、热点，当成了一种比较固定的产品去不断推陈出新，在不同时候给与用户不同的体验。
考虑动画的性价比
最后一条，就是动画虽好，但是打磨一个精品动画是非常耗时的，尤其是在现在非常多的产品业务都是处于一种敏捷开发迭代之下。
一个好的 Web 动画从构思到落地，绝非前端一个人的工作，需要产品、设计、前端等等相关人员公共努力， 不断修改才能最终呈现比较好的效果。所以在项目初期，一定需要考虑好性价比，是否真的值得为了一个 Web 动画花费几天时间呢？当然这是一个非常见仁见智的问题。
参考文章
- 原理图来源 -- Understand Disney's 12 principles of animation
- Animation Principles for the Web
- [译文]网页动画的十二原则
- Twelve basic principles of animation
- 功能性动画设计：优秀的转场效果
最后
想使用 Web 技术绘制生动有趣的动画并非易事，尤其在现在国内的大环境下，鲜有人会去研究动画原则，并运用于实践生产之中。但是它本身确实是个非常有意思有技术的事情。希望本文能给大伙对 Web 动画的认知带来一些提升和帮助，在后续的工作中多少运用一些。
