我们采用错开动画的方式来重建这样的效果，而不是一次就控制一组动画。随着每一个项目动画延迟时间的增加，它们表现的就像是一个个独立的个体，但仍然会作为一个整体正确的移动。这样的结果感觉更加迷人且真实。

先有UI动画，然后才会有好的UI动画。好的动画会让人惊叹“哇哦！”——因为页面看上去很流畅、很漂亮，最重要的是，自然，一点都不会让人觉得不和谐或者僵硬死板。如果你经常逛Dribbble或者 UpLabs这类网站的话，你就会明白我在说什么了。

由于 React 加持了虚拟 DOM 等诸多特性，所以在 React 上实现常规的动画效果有一些特别之处。本文不会深入探讨 React 对动画的处理逻辑，只会简单地演示如何在 React 创建动画效果，因为我也没有做过线上的 React 动画实例，谨以此文抛砖引玉，算是最基础的入门了解。

前段时间无聊或有聊地做了几个移动端的HTML5游戏。放在不同的移动端平台上进行测试后有了诡异的发现，有些手机的动画会“快”一点，有些手机的动画会“慢”一点，有些慢得还不是一两点。通过查找资料发现，基于帧的算法（Frame-based）来实现动画会导致不同帧率的平台体验不一致，而基于时间（Time-based）的动画算法可以很好地改良这种情况，让不同帧率的情况下都能达到较为统一的速度上的体验。本文介绍的就是基于帧动画算法和基于时间动画算法的差异，以及对基于时间算法的改良。

动画是使 Web 应用和网站吸引人的重要因素。 用户希望有快速响应和高度交互的用户界面。 但是，为界面设置动画未必很简单。 什么应设置动画，何时显示，以及动画应有哪种感觉？使用动画作为一种给项目增加活力的方式。动画应支持用户交互。要注意设置动画的属性；有一些属性比其他属性开销更大！那应该怎么在Web中合理的使用动画呢？

从上一篇文章中我们快速的了解了Web Animation API能做什么，也能使用Web Animation API制作类似CSS3 Animation实现的动效。但到目前为止，也仅仅就如此，并没有看到Web Animation API比CSS Animation有任何优势之处。那在这篇文章中，咱们来看看Web Animation API和CSS Animation明显性的区别。

让我们直接进入主题。现代浏览器在完成以下四种属性的动画时，消耗成本较低： position（位置）， scale（比例缩放）, rotation（旋转） 和 opacity（透明度）。如果你对其他的属性设置动画，你就需要对你的冒险负责。而且你的动画将可能达不到流畅的60fps。

动画在Web应用中不是必须的，但是使用得好能起到锦上添花的作用。早期在Web中看到的动画主要有Flash、Gif图片动画、JavaScript动画、SVG动画、APNG动画和CSS3动画等。特别是随着浏览器对CSS3属性支持力度的提高，使用CSS3制作动画的情景在Web应用中越来越频繁。

使用动画在移动应用程序中很容易的。如果您遵循我们的建议，移动应用程序中使用动画变得很简单。虽然现在很多人在移动应用程序中使用CSS3 Animation来制作动画，当然很多人也不这么做。很多最佳实践，还是不断的被忽视。出现这种情况主要是因为仍有许多人并不真正了解这些最佳实践存在的真正原因，因此没有大力的支持。

CSS的Animation成为Web Animation中主要实现方式之一。使用CSS 的animation可以在Web中实现一些动画效果。而其中最为关键的还是依赖于@keyframes，让动画可以根据帧定制不同的动画效果。