CSS3动画

通过 CSS3，我们能够创建动画，这可以在许多网页中取代动画图片、Flash 动画以及JavaScript。

/* @keyframes */
@keyframes mymove{}
@‐webket‐keyframes mymove{}
/* animation */
animation{}
‐webket‐animation{}

动画是使元素从一种样式逐渐变化为另一种样式的效果。

您可以改变任意多的样式任意多的次数。

请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。

0% 是动画的开始，100% 是动画的完成。

为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

@keyframes mymove{
　　from{初始状态属性}
　　to{结束状态属性}
}
1 @keyframes mymove{
2　　 0%{初始状态属性}
3 　　50%{中间再可以添加关键帧}
4 　　100%{结束状态属性}
5 }
实例：改变颜色


@keyframes myfirst2 {
　　from {background: red;}
　　to {background: yellow;}
}
实例：改变背景色和位置


@keyframes myfirst2 {
　　0% {background: red; left:0px; top:0px;} 　　　25% {background: yellow; left:200px; top:0px;}
　　50% {background: blue; left:200px; top:200px;}
　　75% {background: green; left:0px; top:200px;}
　　100% {background: red; left:0px; top:0px;}
}

当您在 @keyframes 中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

@keyframes mymove{
　　from {background: red;}
　　to {background: yellow;}
}
div{animation‐name:mymove;}

1 animation‐duration:3s;

• linear：线性过渡。
• ease：平滑过渡。
• ease-in：由慢到快。
• ease-out：由快到慢。
• ease-in-out：由慢到快再到慢。
• step-start:马上跳到动画每一结束桢的状态【实现逐帧动画效果】

1 animation‐timing‐function:linear;

1 animation‐delay:0.5s;

1 animation‐iteration‐count:infine;

1 animation‐direction:normal;

• none 默认值。延迟之后，执行0%时，里面的效果
• backwards 延迟之前，执行0%时，里面的效果
• forwards 在动画结束后，停留在动画结束的位置。【重点记忆】
• both 动画遵循 forwards 和 backwards 的规则。也就是说，动画初始执行0%，结束停留到结束的
• 位置。

1 animation‐fill‐mode:forwads;

• running:运动
• paused: 暂停; 当鼠标经过时动画停止，鼠标移开动画继续执行(一般使用在划过的效果里面)

1 div:hover{animation‐play‐state:paused;}

1 animation：mymove 2s linear 0.5s infine alternate;

<link rel="stylesheet" href="animate.min.css">

• 　animated 类（必需）--- 基类(基础的样式，每个动画效果都需要加)
• 　infinite 类 -- 循环运动

1 /* bounce 为选中的动画效果名称 */
2 <h1 class="animated infinite bounce">Example</h1>

• -ms- IE浏览器专属的CSS属性需添加-ms-前缀
• -moz- 所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加-moz-前缀
• -o- Opera浏览器专属的CSS属性需添加-o-前缀
• -webkit- 所有基于Webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加-webkit-前缀