纯css 动画实现图片自动轮播效果

最近公司需要写css动画效果，然后看了些资料，写了一个纯css图片自动轮播的效果，感觉css3的动画效果挺好玩的。直接上代码
下面展示一些

//这里是html部分

// An highlighted block
<div class="main">
<selection>
<div ><img src="1.jpg"></div>
<div ><img src="2.jpg"></div>
<div ><img src="3.jpg"></div>
<div ><img src="4.jpg"></div>
</selection>
<ul class="ulbar">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>

// css部分代码

// An highlighted block

.main {
height: 300px;
width: 500px;
overflow: hidden;
position: absolute;
z-index: 10;
}

selection {
width: 2000px;
height: 300px;
display: grid;
grid-template: 1fr/repeat(4, 1fr);
animation: move 4s infinite;
animation-timing-function: steps(4, end);
}

selection:hover,selection:hover + .ulbar:after {
animation-play-state: paused;//鼠标移上暂停动画
}
selection div {
overflow: hidden;
}

selection img {
width: 100%;
height: 100%;
}

.main .ulbar {
list-style: none;
display: grid;
grid-template: 1fr/repeat(4, 1fr);
color: #000;
position: absolute;
width: 200px;
padding-top: 0;
left: 50%;
transform: translateX(-100px);
bottom: 0;

}

.ulbar:after {
content: '';
width: 30px;
height: 30px;
background-color: rgba(255, 255, 255, 0.5);
border-radius: 50%;
color: #ffffff;
position: absolute;
left: 10px;
top: 0;
z-index: -1;
animation: moveto 4s infinite steps(4, end);
}

.ulbar li {
background-color: rgba(255, 255, 255, 0.1);
border-radius: 50%;
width: 30px;
height: 30px;
text-align: center;
display: grid;
justify-self: center;
align-self: center;
justify-content: center;
align-items: center;
}

@keyframes move {
to {
transform: translateX(-2000px);//这里是x轴负的2000呦，一开始写了2000，怎么也出不来图片
}
}

@keyframes moveto {
to {
transform: translateX(200px);
}
}

总结：这里主要用到的就是 animation 的一些属性 ，最主要的是：animation-timing-function: steps(4，end)这个属性，代表动画的4个帧的跳动，一个是图片，一个是当前图片的下标，两者需要保持一样的帧运动就好啦。