css序列帧

一个需求,动画公司输出了一个动画图片,图片有100张,3秒种要换这100张图片 开始傻不拉几的用js setInterval去换图片,卡的要死,其实css动画能很好的解决问题 直接上代码

.boy-img{
    background-image: url('~@/assets/img/sport/boy/1.png');
    background: round;
    width: 750px;height: 514px;display: block;margin: 120px auto 0 auto;
    -webkit-animation: girlRun 3s steps(1,end) infinite;
  }
  @-webkit-keyframes girlRun{
      0%{background-image: url('~@/assets/img/sport/boy/1.png');}
      5%{background-image: url('~@/assets/img/sport/boy/2.png');}
      10%{background-image: url('~@/assets/img/sport/boy/3.png');}
      15%{background-image: url('~@/assets/img/sport/boy/4.png');}
      20%{background-image: url('~@/assets/img/sport/boy/5.png');}
      25%{background-image: url('~@/assets/img/sport/boy/6.png');}
      30%{background-image: url('~@/assets/img/sport/boy/7.png');}
      35%{background-image: url('~@/assets/img/sport/boy/8.png');}
      40%{background-image: url('~@/assets/img/sport/boy/9.png');}
      45%{background-image: url('~@/assets/img/sport/boy/10.png');}
      50%{background-image: url('~@/assets/img/sport/boy/11.png');}
      55%{background-image: url('~@/assets/img/sport/boy/12.png');}
      60%{background-image: url('~@/assets/img/sport/boy/13.png');}
      65%{background-image: url('~@/assets/img/sport/boy/14.png');}
      70%{background-image: url('~@/assets/img/sport/boy/15.png');}
      75%{background-image: url('~@/assets/img/sport/boy/16.png');}
      80%{background-image: url('~@/assets/img/sport/boy/17.png');}
      85%{background-image: url('~@/assets/img/sport/boy/18.png');}
      90%{background-image: url('~@/assets/img/sport/boy/19.png');}
      95%{background-image: url('~@/assets/img/sport/boy/20.png');}
      100%{background-image: url('~@/assets/img/sport/boy/1.png');}
  }