css3 Animation属性
css3的animation属性可以像Flash制作动画一样，通过关键帧控制动画的每一步，实现复杂的动画效果。@keyframes规则是创建动画。 @keyframes规则内指定一个CSS样式和动画将逐步从目前的样式更改为新的样式。
css3Animation属性详解
| 属性 | 描述 | 参数 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | |
| animation-name | 指定 @keyframes 动画的名称。 | 动画名称自己起，与@keyframes规则名称相对应 |
| animation-duration | 指定动画完成一个周期所花费的秒或毫秒。默认是 0。 | 数值n |
| animation-timing-function | 指定动画的速度曲线。默认是 "ease"。 | linear：动画从头到尾的速度是相同的。 ease：动画以低速开始，然后加快，在结束前变慢。 ease-in：动画以低速开始。 ease-out：动画以低速结束。 ease-in-out：动画以低速开始和结束。 cubic-bezier(n,n,n,n)：在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
| animation-fill-mode | 指定当动画不播放时（当动画完成时，或当动画有一个延迟未开始播放时），要应用到元素的样式。 | none：动画在动画执行之前和之后不会应用任何样式到目标元素。 forwards：应用最后关键帧的样式 backwards：应用初始帧的样式 both：动画遵循 forwards 和 backwards 的规则。也就是说，动画会在两个方向上扩展动画属性。 |
| animation-delay | 指定动画何时开始。默认是 0。 | 数值n |
| animation-iteration-count | 指定动画被播放的次数。默认是 1。 | 数值n: 一个数字，定义应该播放多少次动画 infinite：指定动画应该播放无限次 |
| animation-direction | 指定动画是否在下一周期逆向地播放。默认是 "normal"。 | normal：动画按正常播放。 reverse：动画反向播放。 alternate：动画在奇数次（1、3、5...）正向播放，在偶数次（2、4、6...）反向播放。 alternate-reverse：动画在奇数次（1、3、5...）反向播放，在偶数次（2、4、6...）正向播放。 |
| animation-play-state | 指定动画是否正在运行或暂停。默认是 "running"。 | paused：暂停动画 running：运行动画 |
利用Animation属性实现一个简单的幻灯片切换效果
原理是通过animate的关键帧来切换元素的背景图片即可达到幻灯片切换效果
<body>
<div class="banner">
</div>
</body>.banner {
width: 480px;
height: 320px;
margin: 150px auto;
overflow: hidden;
background-size: cover;
background-position: center;
animation-name: "banner"; // 动画名称
animation-duration: 20s; // 播放动画所需时间
animation-timing-function: linear; // 播放动画的速度
animation-iteration-count: infinite; // 动画播放次数
}
@-webkit-keyframes 'banner' {
0% {background: url('images/1.jpg') no-repeat;}
25% {background: url('images/2.jpg') no-repeat;}
50% {background: url('images/3.jpg') no-repeat;}
75% {background: url('images/4.jpg') no-repeat;}
100% {background: url('images/5.jpg') no-repeat;}
}