在网格图像中使用Spritesheets的CSS动画（不是连续）

3 回答

• 17

  由于这可能是一项难以调试的任务，我想从相同的问题开始，但是在一个更容易调试的环境中 .

  我选择在整个图像上将其作为矩形动画 .

  .hi {
      width: 320px;
      height: 315px;
      background-image: url("http://i.stack.imgur.com/CjMscm.jpg");
      position: relative;
      border: solid 1px black;
  }
  
  .hi:before {
      content: "";
      position: absolute;
      width: 100%;
      height: 53px;
      left: 0px;
      top: 0px;
      border: solid 1px red;
      -webkit-animation: playv 18s steps(6) infinite; 
  }
  
  @-webkit-keyframes playv {
       0% { top:   0px; }
     100% { top: 315px; }
  }
  
  .hi:after {
      content: "";
      position: absolute;
      width: 53px;
      height: 100%;
      left: 266px;
      top: 0px;
      border: solid 1px red;
      -webkit-animation: playh 3s steps(6) infinite; 
  }
  
  @-webkit-keyframes playh {
       0% { left:   0px; }
     100% { left: 320px; }
  }
  

  <div class="hi">
  </div>
  

  在图像上，我显示2个伪元素，一个是行选择器，另一个是列选择器 . 我调整动画直到它们没问题

  ---

  现在，让我们验证同时设置两个动画是否有效：

  .hi {
      width: 320px;
      height: 315px;
      background-image: url("http://i.stack.imgur.com/CjMscm.jpg");
      position: relative;
      border: solid 1px black;
  }
  
  .hi:before {
      content: "";
      position: absolute;
      width: 53px;
      height: 53px;
      left: 0px;
      top: 0px;
      border: solid 1px red;
      -webkit-animation: playv 18s steps(6) infinite, playh 3s steps(6) infinite; 
  }
  
  @-webkit-keyframes playv {
       0% { top:   0px; }
     100% { top: 315px; }
  }
  
  @-webkit-keyframes playh {
       0% { left:   0px; }
     100% { left: 320px; }
  }
  

  <div class="hi">
  </div>
  

  ---

  现在最后的项目：

  .hi {
    width: 53px;
    height: 53px;
    background-image: url("http://i.stack.imgur.com/CjMscm.jpg");
    position: relative;
    border: solid 1px black;
    -webkit-animation: playv 1s steps(6) infinite, playh 0.1667s steps(6) infinite;
    animation: playv 1s steps(6) infinite, playh 0.1667s steps(6) infinite;
  }
  
  @-webkit-keyframes playv {
    0% {
      background-position-y: 0px;
    }
    100% {
      background-position-y: -315px;
    }
  }
  
  @-webkit-keyframes playh {
    0% {
      background-position-x: 0px;
    }
    100% {
      background-position-x: -320px;
    }
  }
  
  @keyframes playv {
    0% {
      background-position-y: 0px;
    }
    100% {
      background-position-y: -315px;
    }
  }
  
  @keyframes playh {
    0% {
      background-position-x: 0px;
    }
    100% {
      background-position-x: -320px;
    }
  }
  

  <div class="hi">
  </div>
  

  所有这些对于webkit浏览器，删除IE和FF的前缀 . 此外，在这种方法中，避免在左下角显示2个空白图像是不可能的 . 如果您没有完整的网格，并且不想显示空图像，则需要逐个指定所有关键帧

  回复于 2024-05-03T11:46:19+08:00
• 2

  请改用background-position-x和background-position-y属性 .

  对于这个图像

  preview http://www.fore6.com/wp-content/uploads/2011/09/henson11-hp-1g.png

  尺寸710px×355px

  精灵帧尺寸为118.333像素X 118.333像素，我们需要水平移动6帧，垂直移动3帧 .

  这意味着我们需要创建两个独立的关键帧动画来遍历每个方向 . 当x方向动画正在播放时，其他必须冻结直到完成 .

  y动画的持续时间也必须是3X .

  这是代码

  <div class="hi"></div>
  
  
  .hi {
    width: 118.333px;
    height: 118.333px;
    background-image: url("http://www.fore6.com/wp-content/uploads/2011/09/henson11-hp-1g.png");
    animation: playX 1s steps(6) infinite,
               playY 3s steps(3) infinite;
  }
  
  @keyframes playX {
    from {background-position-x: 0px;}
    to {background-position-x: -710px;}
  }
  
  @keyframes playY {
    from {background-position-y: 0px;}
    to {background-position-y: -355px;}
  }
  

  fiddle here

  回复于 2024-05-03T11:46:19+08:00
• 0

  为了帮助理解它是如何工作的，除了@vals提供的答案之外，这里还有一个SCSS的通用解决方案：jsfiddle link

  SCSS：

  // Variables to edit
  $imgUrl: 'https://mrbubblewand.files.wordpress.com/2009/08/magic_001.png';
  $imageWidth: 960px;
  $imageHeigth: 1152px;
  $itemNbColumns: 5;
  $itemNbLines: 6;
  $spriteAnimationTime: 1s;
  
  
  // =======================================
  
  $squareWidth: $imageWidth / $itemNbColumns;
  $squareHeigth: $imageHeigth / $itemNbLines;
  
  // ========================================
  
  .square {
      width: $squareWidth;
      height: $squareHeigth;
      background-image: url($imgUrl);
      position: relative;
      border: solid 1px black;
      -webkit-animation: playvsquare $spriteAnimationTime*$itemNbColumns*$itemNbLines steps($itemNbLines) infinite, playhsquare $spriteAnimationTime*$itemNbColumns steps($itemNbColumns) infinite; 
  }
  
  @-webkit-keyframes playvsquare {
       0% { background-position-y:   0px; }
     100% { background-position-y: -$imageHeigth; }
  }
  
  @-webkit-keyframes playhsquare {
       0% { background-position-x:   0px; }
     100% { background-position-x: -$imageWidth; }
  }
  
  // =======================================
  
  .sprite {
      width: $imageWidth;
      height: $imageHeigth;
      background-image: url($imgUrl);
      position: relative;
      border: solid 1px black;
  }
  
  .sprite:before {
      content: "";
      position: absolute;
      width: 100%;
      height: $squareHeigth; /* taille du carré */
      left: 0px;
      top: 0px;
      border: solid 1px red;
      -webkit-animation: playvsprite$spriteAnimationTime*$itemNbColumns*$itemNbLines steps($itemNbLines) infinite; 
  }
  
  .sprite:after {
      content: "";
      position: absolute;
      width: $squareWidth;
      height: 100%;
      left: $squareWidth;
      top: 0px;
      border: solid 1px red;
      -webkit-animation: playhsprite $spriteAnimationTime*$itemNbColumns steps($itemNbColumns) infinite; 
  }
  
  // Déplacement
  @-webkit-keyframes playvsprite {
       0% { top:   0px; }
     100% { top: $imageHeigth; }
  }
  // Déplacement
  @-webkit-keyframes playhsprite {
       0% { left:   0px; }
     100% { left: $imageWidth; }
  }
  

  HTML：

  <p>Square :</p>
  <div class="square"></div>
  <p>Entire sprite :</p>
  <div class="sprite"></div>
  

  回复于 2024-05-03T11:46:19+08:00