### **animate动画** **注意点：** **1.** Animation只应用在页面上已存在的DOM元素上。 **2.**学习Animation之前我们有必要先来了解"Keyframes",我们把他叫做“关键帧。 <br/> <br/> <br/> ### Keyframes **注意点**： **1.** Keyframes具有其自己的语法规则，他的命名是由"@keyframes"开头，后面紧接着是这个“**动画的名称**”加上一对花括号“**{}**”。 **2.** @keyframes"中的样式规则是由多个百分比构成的，如“0%”到"100%"之间，我们可以在这个规则中创建多个百分比，我们分别给每一个百分比中给需要有动画效果的元素加上不同的属性，从而让元素达到一种在不断变化的效果，比如说移动，改变元素颜色，位置，大小，形状等， **3.** 可以使用“fromt”“to”来代表一个动画是从哪开始，到哪结束，也就是说这个 "from"就相当于"0%"而"to"相当于"100%" **4.** keyframes的单位只接受百分比值 <br/> <br/> <br/> #### **animation属性** animation属性合并写法： animation:<**animation-name**> || <**animation-duration**> || <**animation-timing-function**> || **<animation-delay>** || <**animation-iteration-count**> || <**animation-direction**>  <br/> <br/> **一、animation-name**：用来定义一个动画的名称，值有2个：none或**动画的名称** 注意点： 1. 此处的**动画的名称**要和Keyframes中的**动画的名称**一致，如果不一致,将不能实现任何动画效果； 2. none为默认值，当值为none时，将没有任何动画效果。 3. 同时附几个animation给一个元素，我们只需要用逗号“，”隔开。 <br/> <br/> **二、animation-duration**：定义动画完成一个周期所花费的时间（秒或毫秒），默认值是0，也就是变换时是即时的。 <br/> **三、animation-timing-function:**：定义动画的播放方式。具有以下六种变换方式： 1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0). 2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0). 3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0). 4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0). 5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0) 6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。 <br/> <br/> **四、animation-delay:** 定义动画开始前等待的时间，即动画何时开始效果展现。值有2个：多小秒（毫秒）和0 注意点：默认大小是"0"，也就是变换立即执行，没有延迟。 <br/> <br/> **五、animation-iteration-count**：指定元素播放动画的循环次数。 注意点：其可以取值为数字，其默认值为“1”；infinite为无限次数循环。 <br/> <br/> **六、animation-direction**：指定元素动画播放的方向。其只有两个值，默认值为**normal**和**alternate**。 注意点：如果设置为normal时，动画的每次循环都是向前播放；另一个值是alternate，他的作用是，动画播放在第偶数次向前播放，第奇数次向反方向播放。著作权归作者所有。 <br/> <br/> **七、animation-play-state**是用来控制元素动画的播放状态。其主要有两个值，running和paused，running为默认值 （这个属性目前很少内核支持） 注意点： 1.使用running，则播放不一定是从元素动画的开始播放，而是从你暂停的那个位置开始播放。 2.如果使用paused，暂停动画的播放，元素的样式将回到最原始设置状态。 示例：发光的按钮 请见站点里面的面或网站[http://www.w3cplus.com/content/css3-animation](http://www.w3cplus.com/content/css3-animation) step（）函数网址： 1.[http://blog.csdn.net/christine95/article/details/50471101](http://blog.csdn.net/christine95/article/details/50471101)