CSS 3 动画 实现图片动态切换

用到的方法：

动画 Animation + @keyframes
注意：animation属性要与keyframes规则进行绑定

CSS3 创建动画，它可以取代许多网页动画图像、Flash 动画和 JavaScript 实现的效果。当用@keyframes 创建动画时，需要把它绑定到一个选择器（例如div），否则动画不会有任何效果。

动画属性

属性	描述
@keyframes	规定动画
animation	所有动画的简写属性
animation-name	规定@keyframes 动画的名称
animation-duration	规定动画完成一个周期所花费的时间，默认0
animation-timing-function	规定动画速度曲线，默认是“ease”
animation-fill-mode	规定当动画不播放时（当动画完成时或当动画有一个延迟为开始播放时）要用到的元素样式
animation-dispaly	规定动画何时开始，默认是0
animation-iteration-count	规定动画被播放的次数，默认是1
animation-direction	规定动画是否在下一周期逆向播放，默认是“normal”
animation-play-state	规定动画是否正在运行或暂停，默认是“running”

animation-timing-function规定速度曲线的参数

值	描述
linear	动画从头到尾速度相同
ease	默认。低速开始——加快——结束变慢
ease-in	动画以低速开始
ease-out	动画以低速结束
ease-in-out	动画以低速开始和结束

实例

效果图
变换前

变换中

变换后

doem

<div class="background"></div>

<style>
.background{
  width: 100%;
  height: 100vh;
  animation: move 10s linear  infinite; /*自定义动画名称*/
  /*!move：动画名称，10s：执行时间 
     ease：执行的函数，infinite：代表执行次数，这里指无限次*!*/
}
@keyframes move {
/**注意这几个图片大小一定要一样，否则会出现抖动现象*/
/*这里的0%50%100%是相对于执行时间的，最后一个图片先播放*/
  0%{
    background: url('/static/image/img2.png') no-repeat;
  	background-size:100% 100%;
  	}
  50%{
  	background: url('/static/image/img1.jpg') no-repeat;
  	background-size:100% 100%; 
  	}
  100%{
  	background: url('/static/image/img3.jpg') no-repeat;
  	background-size:100% 100%; 
  	}
}
</style>