css3动画实现简单的幻灯片效果

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的关键帧来切换元素的背景图片即可达到幻灯片切换效果

.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;}
}

文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料