关于页面动画

1.css3 animation

css3新增的animation可以方便的编写实用且高效的页面动画效果

单纯的css规则就可以实现一个简单的小球下落效果

2.css transition

css3的transition提供页面变化后的过渡动画效果

使用js或者:hover等伪类改变元素的样式之后，transition会为元素的样式改变添加上过渡效果，取代默认的瞬移效果

3.js requestAnimationFrame

单纯使用css也有它的局限性，比较难以高效的编写出复杂的动态效果，比如为小球下落添加上回弹效果。

然后就是单纯使用js编写动画，通常是使用定时器与requestAnimationFrame来定时改变dom结构展现出动画效果。相较于初始的定时器动画，requestAnimationFrame是专门为实现高性能的帧动画而设计的一个API，与定时器相比有两个主要优势：

1. requestAnimationFrame 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般来说，这个频率为每秒60帧。
2. 在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的的cpu，gpu和内存使用量。

requestAnimationFrame就是一个性能优化版、专为动画量身打造的setTimeout，不同的是requestAnimationFrame不是自己指定回调函数运行的时间，而是跟着浏览器内建的刷新频率来执行回调，这当然就能达到浏览器所能实现动画的最佳效果了。

这个小球的回弹效果使用了tween.js来实现。

4.js setInterval setTimeout

setInterval与setTimeout是js的定时器，setInterval会每隔一个给定的时间段执行特定的代码，而setTimeout会在给定的时间间隔之后执行特定代码。

使用setInterval执行dom操作刷新页面就能实现各种动画效果，在效率上会略低与以上三种方式