动画暂停与开始

<div class="banner">
            <div class="banner1">
                <img src="img/*****.png" alt="">
                <!-- 图片为雪碧图 -->
            </div>
        </div>

* {
      padding: 0%;
      margin: 0%;
}
.banner {
      width: 218.3px;
      height: 200px;
      overflow: hidden;
}
.banner1 {
      width: 655px;
      height: 200px;
      animation: ban 3s steps(3) infinite;
}
.banner1:hover{
      animation-play-state: paused;
      /* 动画开始状态animation-play-state*/
      /* 动画暂停paused，就是说鼠标放上去暂停动画 */
      /* 动画running 鼠标放上去执行,这个配合一开始的暂停paused使用在上面animation里面的值写入即可 */
}
.banner1 img {
      width: 100%;
}
@keyframes ban {
      0% {
        margin-left: 0%;
     }
      100% {
        margin-left: -655px;
     }
}