12.3 CSS3提供的Animation动画
CSS3提供了强大的Tween动画支持：Animation动画，这种动画允许开发者定义多个关键帧，浏览器
将会负责计算、插入关键帧之间的虚拟动画帧。
CSS3为Animation动画提供了如下几个属性。
animation-name：指定动画的名称。该属性指定一个已有的关键帧定义。
animation-duration：指定动画的持续时间。
animation-timing-function：指定动画的变化速度。
animation-delay：指定动画延迟多长时间才开始执行。
animation-iteration-count：指定动画的循环执行次数。
animation：这是一个复合属性。该属性的格式为：animation-name animation-duration animation-timing-function
animation-delay animation-iteration-count，使用该属性可以同时指定 animation-name animation-duration
animation-timing-function animation-delay animation-iteration-count等属性。
上面属性中animation-name 的属性值应该是一个关键帧定义，这个关键帧定义满足如下格式：
keyframes 关键帧名称{
from | to |百分比{
属性1：属性值1;
属性2：属性值2;
属性3：属性值3;
}
}
上面语法格式中，from | to |百分比用于定义关键帧的位置，其中from代表开始处;to代表动画结束帧;百分比则指定关键帧的出现
位置。例如,10%代表关键帧出现在动画进行了1/10时间处。一个关键帧定义可以包含多个关键帧。
代码示范：
//定义一个关键帧
keyframes ‘fkjava‘ {
//定义动画开始处的关键帧
0%{
left:100px;
}
//定义动画进行40%时的关键帧
40%{
left:150px;
}
//定义动画进行60%时的关键帧
60%{
left:75px;
}
//定义动画进行100%时的关键帧
100%{
left:100px
}
}
//为div元素定义CSS样式
div{
width:100px;
height:100px;
border:1px solid;
position:absolute;
}
//为鼠标悬停的div元素定义CSS样式
div:hover{
//指定执行fkjava动画
animation-name:‘fkjava‘;
//指定动画的执行时间
animation-duration:5s;
//指定动画的循环次数为1
animation-iteration-count:1;
}