SOURCE

<div class="outer"></div>

*{
    margin: 0;
    padding: 0;
    border: none;
    /* box-sizing: border-box; */
}

body{
  background-color: white;
}

/* 图片size:1680x140 一共12个格子，每格占140*/


.outer{
  /* 图片宽度为480，放3张，共480x3 = 1440 */
  width: 140px;  
  height: 140px;
  outline: 1px solid red;
  background-image: url(https://hjd6633.oss-cn-hangzhou.aliyuncs.com/notes/html_css/merry-go-round/running.png);
  background-repeat: no-repeat;
}


  

/* 代码开始 */
@keyframes run {
  /* 让背景移动 */
  0% { background-position: 0 0;}
  100% { background-position: -1680px 0;}
}

@keyframes move {
  0% {transform: translateX(0);}
  100% {transform: translateX(600px);}
}

.outer{
  /* 两个以上动画 animation: 动画1, 动画2, 动画3 分开写 */
  animation: 
    run 0.7s steps(12) infinite, 
    move 2s linear forwards; 
}

.outer:hover{
  animation-play-state: paused;
}