使用雪碧(sprite)图制作CSS帧动画

简介

本文简要介绍了使用使用传统的一行雪碧图和多行雪碧图结合 CSS animation 实现帧动画的示例。

一行雪碧图：

多行雪碧图：

效果与代码

在线DEMO: 点击查看

效果如下:

对于一行的雪碧图

/* 12 × 1 sprite */

.box.box-1d {
    background-size: 1200% 100%;
    background-image: url("./assets/1d.png");
    animation: sprite-1d-x 12s steps(12, end) infinite;
}

@keyframes sprite-1d-x {
    from {
        background-position-x: 0;
    }
    
    to {
        background-position-x: -1200%;
    }
}

很好理解就不赘述了，这里有一个细节就是 steps 的使用，建议看 CSS3 animation属性中的steps功能符深入介绍 学习。

对于多行的雪碧图

/* 4 × 3 sprite */
.box.box-2d {
  background-size: 400% 300%;
  background-image: url('./assets/2d.png');
  animation: sprite-2d-x 4s steps(4, end) infinite, sprite-2d-y 12s steps(3, end) infinite;
}

@keyframes sprite-2d-x {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: -400%;
  }
}

@keyframes sprite-2d-y {
  from {
    background-position-y: 0;
  }

  to {
    background-position-y: -300%;
  }
}

对于多行的情况，我们使用了两个动画。在 x 和 y 两个方向上轮次循环。需要留意的是两个方向上动画的时间关系。可以在线自己感受：点击查看