CSS animation动画实现轮播图

1、2d，3d无法实现动画的持续播放，所以采用animation来实现。

2、淡入淡出轮播图

结构层代码：
 <div class="box">
        <!-- 用来放轮播的图片 -->
        <div class="img">
            <ul class="item .clearfix">
                <li class="item-img item-img1"></li>
                <li class="item-img item-img2"></li>
                <li class="item-img item-img3"></li>
                <!-- <li class="item-img item-img4"></li>
            <li class="item-img item-img5"></li> -->
            </ul>
        </div>
        <!-- 用来放圆点 -->
        <div class="circle">
            <ul class="clearfix">
                <li>
                    <div class="focus focus1"></div>
                </li>
                <li>
                    <div class="focus focus2"></div>
                </li>
                <li>
                    <div class="focus focus3"></div>
                </li>
            </ul>
        </div>
    </div>
样式层代码：
*{
    margin: 0;
    padding:0;
}
.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
.box{
    width: 100%;
    height: 400px;
    position: relative;
}
ul{
    list-style: none;/* 去除列表标记 */
}
.item{
    position: relative;
}
.item .item-img{
    width: 100%;
    height: 400px;
    position: absolute;
    background-size: cover;
    animation-name:fade;
    animation-duration:12s;/* 按照百分比来分配时间 */
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.item-img + .item-img{/* 当检测到指定盒子它的兄弟盒子会隐藏 */
    opacity: 0;
}
.item-img1{
    background: url(./choose-bg.jpg) no-repeat center center;
    animation-delay: -1s;/* 让第一张图马上播放 */
}
.item-img2{
    background: url(./info-bg.jpg) no-repeat center center;
    animation-delay: 3s;
}
.item-img3{
    background: url(./slider-bg.jpg) no-repeat center center;
    animation-delay: 7s;
}
/* .item-img4{
    background: url(./wedo-img2.jpg) no-repeat center center;
    animation-delay: 11s;
}
.item-img5{
    background: url(./wedo-img3.jpg) no-repeat center center;
    animation-delay: 15s;
} */

/* 4s完成一个生命周期
0-1s:淡入
1-4：持续显示
4s-最后：淡出，并且隐藏
以上过程适合每一个图片。
*/
/* 难点 */
@keyframes fade{
 /* 总共12s，完成关键帧。每一秒需要8.3% */
    0%{
       opacity: 0;
       z-index: 2; 
    }8.3%{
        /* 0-5 经历1s钟淡入 */
       opacity: 1;
       z-index: 2; 
    }33.2%{
        /* 0-20 3s持续显示 */
        opacity: 1;
        z-index: 2;
    }41.5%{
        opacity: 0;
        z-index: 0;
    }100%{
        opacity: 0;
        z-index: 0;
    }
}
.circle{
    position: absolute;
    top: 387px;
    width: 100px;
    height: 10px;
    z-index: 99;
    left: calc(50% - 100px);
}
.circle li{
    width: 10px;
    height: 10px;
    border: 1px white solid;
    border-radius: 100%;
    float: left;
    margin: 0 10px;
}
 .focus{
    width: 100%;
    height: 100%;
    background-color: gray;
    border-radius: 100%;
    animation: fade 12s linear;
}
.focus2,.focus3{
    opacity: 0;
}
.focus1{
    animation-delay: -1s;
}
.focus2{
    animation-delay: 3s;
}
.focus3{
    animation-delay: 7s;
}