CSS3动画

一 CSS3实现动画几种方式：CSS3 Transform变形理解与应用：

transform(转换)：用于元素的2D或3D转换。这个属性允许你将元素旋转(rotate)，缩放(scale)，移动(translate)，倾斜(skew)等。

transition(过渡)：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。但只有两个关键贞。开始，结束。

transition特性

1. 需要具体数值，不能用block,none等
2. transition需用事件触发【比如加个hover伪类】，不能在网页加载时自动发生
3. 一次性，不能重复发生，除非一再触发
4. 只有两个状态：开始和结束状态
5. 一条transition规则只能定义一个属性

animation(动画)：对元素某个属性或多个属性的变化，进行控制（时间等），类似flash的补间动画。可以设置多个关键贞。animation主要解决transition特性问题。

 

二 Transition与Animation区别: transition与animation
transition需要触发一个事件 ,而animation在不需要触发任何事件的情况下也可以显式的随着时间变化来改变元 素css的属性值，从而达到一种动画的效果。

 

三 深入理解requestAnimationFrame

1 在Web应用中，实现动画效果的方法比较多：

Javascript 中可以通过定时器 setTimeout 来实现，

css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。

html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，顾名思义就是请求动画帧。

 

2 动画原理：动画本质就是要让人眼看到图像被刷新而引起变化的视觉效果，这个变化要以连贯的、平滑的方式进行过渡。人们眼前所看到图像正在以每秒60次的频率刷新，由于刷新频率很高，因此你感觉不到它在刷新。