动画

作者：PaulLewis

动画是使网络应用和网站吸引人的重要因素。用户希望有快速响应和高度交互的用户界面。但是，为界面设置动画未必很简单。什么应设置动画，何时显示，以及动画应有哪种感觉？

TL;DR

• 使用动画方式给项目增加活力。
• 动画应支持用户交互。
• 要小心选择您为其设置动画的属性；有些属性比其他属性开销更大。

选择合适的内容来设置动画

出色的动画可增添一层乐趣，增加项目对用户的吸引力。可以将您喜欢的几乎所有内容设置动画，不管是宽度、高度、位置、颜色，还是背景，但您需要注意潜在的性能瓶颈，以及动画如何影响您的应用的个性。卡顿或选择不当的动画可能对用户体验产生负面影响，因此动画需要高性能并且恰当。

使用动画来支持交互

不要仅仅因为您可以做动画就随便做；它只会惹恼用户并妨碍操作。相反，要有策略地放置动画以_增强_用户交互。如果用户点击菜单图标，滑动以显示抽屉式导航栏，或者点击按钮，则可以使用少量辉光或弹跳来确认交互。避免不必要地打断或妨碍用户活动的动画。

避免为开销大的属性设置动画

唯一比放置不当的动画更糟的事情是导致页面卡顿的动画。这种类型的动画让用户感到沮丧和不快，并且可能希望你没有设置动画。

某些属性做出改变所花费的开销比其他属性要多，因此更可能使动画卡顿。例如，与改变元素的文本颜色相比，改变元素的box-shadow需要开销大很多的绘图操作。同样，改变元素的width可能比改变其transform要多一些开销。

您可以在动画与性能指南中阅读有关动画性能考虑事项的更多内容，但是如果想要 TL;DR（太长；未读），则坚持使用转换和透明度改变，以及使用will-change。如果想确切知道给指定的属性设置动画会触发什么效果，请参阅CSS 触发器。