如何将CSS精灵图逐帧动画从第一列切换到第二列？

首先明确你疑惑的background里0 0的含义：这是background-position的简写，第一个值代表水平位置，第二个代表垂直位置，0 0表示背景图的左上角和元素的左上角完全对齐。

你修改后页面为空的核心原因是：把水平位置设成了正的400，这会将背景图向右移出元素的可视区域，自然看不到内容。Sprite图切换列时，水平位置应该用负数——因为要把目标列向左移动到元素的可视范围内。

正确的修改步骤（假设每列宽度是400px，和原代码一致）： #

• 切换到第二列：
  1. 设置初始背景位置：把background里的0 0改成-400px 0，锁定第二列的水平位置。
  2. 修改@keyframes里的最终位置：保持水平值不变，只调整垂直值，也就是从-400px 0过渡到-400px -2391px。
     代码示例：

  .your-element-class {
    background: url('你的sprite图路径') -400px 0 no-repeat;
    /* 宽度、高度、动画时长等其他样式保持原代码不变 */
  }
  
  @keyframes animateSprite {
    100% {
      background-position: -400px -2391px;
    }
  }
  

• 切换到第三列：把水平值改成-800px（-400*2）；第四列改成-1200px（-400*3），垂直值的动画逻辑和第一列完全一致。

关键注意点： #

• 确保元素的宽度严格等于单列Sprite图的宽度，否则会显示相邻列的内容，破坏逐帧效果。
• 动画的垂直终点值-2391px是整列的总高度，这个值不用修改，仅调整水平偏移量就能切换不同列的动画。

内容的提问来源于stack exchange，提问作者Glorious Chaos