用css动画实现图片淡入淡出轮播

html部分

<div id="silder-box">
    <div class="silder-img">
		<ul>
			<li><img src="Res/header-01.jpg" ></li>
			<li><img src="Res/header-02.jpg" ></li>
			<li><img src="Res/header-03.jpg" ></li>
			<li><img src="Res/header-04.jpg" ></li>
		</ul>
	</div>
</div>

css部分

            * {
				margin: 0;
				padding: 0;
			}
		    #silder-box {
				 width: 100vw;
				 height: 45vw;
			 }
			#silder-box .silder-img {
				 position: relative;
			 }
			#silder-box ul li {
				position: absolute;
				list-style: none;
			 }
			#silder-box li img {
				 width: 100vw;
				 height: 45vw;
			 }
			 #silder-box ul>li:nth-child(4) {
			 	animation: li4 8s infinite;
			 }
			 #silder-box ul>li:nth-child(3) {
			 	animation: li3 8s infinite;
			 }
			 #silder-box ul>li:nth-child(2) {
			 	animation: li2 8s infinite;
			 }
			 #silder-box ul>li:nth-child(1) {
			 	animation: li1 8s infinite;
			 }
			 @keyframes li4{
			 	0%{opacity: 1;}
			 	20%{opacity: 0;}
			 	
			 	75%{opacity: 0;}
			 }
			 @keyframes li3{
			 	25%{opacity: 1;}
			 	45%{opacity: 0;}
			 	
			 	75%{opacity: 0;}
			 }
			 @keyframes li2{
			 	50%{opacity: 1;}
			 	70%{opacity: 0;}
			 	
			 	75%{opacity: 0;}
			 }
			 @keyframes li1{
			 	75%{opacity: 1;}
			 	95%{opacity: 0;}
			 }