自定义动画
1、animation-name(动画名称)：
元素所应用的动画名称，必须与规则@keyframes配合使用，因为动画名称由@keyframes定义
语法：
animation-name ：none | <identifier>
例：
div{
-webkit-animation-name : FromLeftToRight;
animation-name : FromLeftToRight;
2. keyframes (关键帧)：
被称为关键帧，其类似于Flash中的关键帧。在CSS3中其主要以“@keyframes”开头，后面紧跟着是动画名称加上一对花括号“{…}”，括号中就是一些不同时间段样式规则。
语法：
@keyframes <identifier> {
[ from | to | <percentage> ]{ sRules } ] [,*]
}
例1：@keyframes FromLeftToRight{
from {left: 0; }
to {left: 800px; }
}
例2：
HTML:<div class="box"></div>
CSS:
.box {
100px;
height: 100px;
background: #5CBE3E;
margin: 5px;
animation-name: fromLeftToRight;
animation-duration: 3s;
animation-iteration-count: infinite;
}
.box:hover {
animation-play-state: paused;
}
@keyframes fromLeftToRight {
from {
margin-left: 0;
}
to {
margin-left: 300px;
}
}
3、animation-duration(动画时间)
设置对象动画的持续时间
语法：
animation-duration：<time>
例：
div{
-webkit-animation-duration:1s;
animation-duration:1s
}
4、设置对象动画的过渡速度类型
语法：
animation-timing-function： ease | linear | ease-in | ease-out | ease-in-out
例：
div{
-webkit-animation-timing-function : ease-in;
animation-timing-function : ease-in;
}
5. animation-delay(动画延迟时间)：
语法：
animation-delay：<time>
例：
div{
-webkit-animation-delay : 1s;
animation-delay : ease-in;
}
6. animation-iteration-count(动画执行次数)：
设置对象动画的延迟时间
语法：
animation-iteration-count：infinite | <number>
infinite表示无限次数
例：
div{
-webkit-animation-iteration-count : 2;
animation-iteration-count : 2;
}
