纯css 滚动动画轮播图 鼠标 移入暂停 移出继续

html

                <!-- 轮播图 -->
                <div class="container">
                  <div class="wrapper swiper-wrapper">
                    <ul class="lists">
                      <img src="/static/images/1.jpg" alt="">
                      <img src="/static/images/2.jpg" alt="">
                      <img src="/static/images/3.jpg" alt="">
                      <img src="/static/images/4.jpg" alt="">
                      <img src="/static/images/5.jpg" alt="">
                      <img src="/static/images/1.jpg" alt="">
                    </ul>
                  </div>
                </div>

css

.container .wrapper ul {
    width: 6000px;
}
.lists img {
    width: 250px;
    height: 186px;
    object-fit: cover;
}
.lists {
    width: 100%;
    height: 186px;
    animation: 20s moves linear infinite normal;
}

.lists:hover { // 移入停止
    animation: 20s moves linear infinite paused;

}

@keyframes moves {
    0% {
        transform: translate(0);
    }

    100% {
        transform: translate(-4250px);
    }
}

核心：

滚动：

animation: 20s moves linear infinite normal;

停止：
animation: 20s moves linear infinite paused;

如果有多个动画，需要暂停所有动画，就在父元素里面触发

暂停： animation-play-state: paused !important;

开始：animation-play-state: normal !important;