css animation + step 实现帧动画

[smileyby]

.bg {
      width: 220px;
      height: 220px;
      background-image: url('bg.png');
    }

    /* 定义一个动画，每秒切换一帧图片，循环播放 */
    @keyframes frame-animation {
      from {
        background-position: 0px 0px;
      }
      to {
        background-position: -6600px 0px;
      }
    }

    /* 应用动画到背景图，并设置节奏为step(n) n 为帧动画的帧数量，对应背景图中有多少帧 */
    .bg {
      animation: frame-animation 2.5s steps(30) infinite;
    }