纯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个帧的跳动，一个是图片，一个是当前图片的下标，两者需要保持一样的帧运动就好啦。