CSS3动画在最后一帧

Question

我有一个问题，我的精灵表动画在最后一帧停止了 - 我已将animation-iteration-count更改为＆＃39; 1＆＃39;并且还将animation-fill-mode更改为＆＃39; forwards＆＃39;，但它似乎没有效果。

动画也不会恢复到第一帧，它会一直运行到最后，然后跳回到精灵表最后一行的第一帧。

所以我觉得我几乎就在那里，但也许我错过了什么？

我在这里举了一个例子来证明。

＆＃13;

＆＃13;

.container {
  width: 64px;
  height: 64px;
  position: relative;
}

@-webkit-keyframes spritex {
  0% {
    background-position-x: 0%;
    background-position-y: 0%;
  }
  20% {
    background-position-x: -500%;
    background-position-y: 0%;
  }
  20.01% {
    background-position-x: 0%;
    background-position-y: -100%;
  }
  40% {
    background-position-x: -500%;
    background-position-y: -100%;
  }
  40.01% {
    background-position-x: 0%;
    background-position-y: -200%;
  }
  60% {
    background-position-x: -500%;
    background-position-y: -200%;
  }
  60.01% {
    background-position-x: 0%;
    background-position-y: -300%;
  }
 80% {
    background-position-x: -500%;
    background-position-y: -300%;
  }
  
  80.01% {
    background-position-x: 0%;
    background-position-y: -400%;
  }
  99.99% {
    background-position-x: -500%;
    background-position-y: -400%;
  }
  100% {
    background-position-x: -500%;
    background-position-y: -400%;
  }
}

.sprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
  background-size: 500% 500%;
  -webkit-animation: spritex 3s steps(5) 1;
  -webkit-animation-fill-mode: forwards;
  animation: spritex 3s steps(5) 1;
  animation-fill-mode: forwards;
}
}

＆＃13;

<div class="container">
<div class="sprite"></div>
</div>

＆＃13;

＆＃13;

＆＃13;

(View in Codepen)

Answer 1

你的立场不正确。 正确的位置不应高于100％。

这是正确的

.container {
  width: 64px;
  height: 64px;
  position: relative;
}

@-webkit-keyframes spritex {
  0% {
    background-position-x: 0%;
    background-position-y: 0%;
  }
  20% {
    background-position-x: 100%;
    background-position-y: 0%;
  }
  20.01% {
    background-position-x: 0%;
    background-position-y: 25%;
  }
  40% {
    background-position-x: 100%;
    background-position-y: 25%;
  }
  40.01% {
    background-position-x: 0%;
    background-position-y: 50%;
  }
  60% {
    background-position-x: 100%;
    background-position-y: 50%;
  }
  60.01% {
    background-position-x: 0%;
    background-position-y: 75%;
  }
 80% {
    background-position-x: 100%;
    background-position-y: 75%;
  }
  80.01% {
    background-position-x: 0%;
    background-position-y: 100%;
  }
  100% {
    background-position-x: 100%;
    background-position-y: 100%;
  }
}

.sprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
  background-size: 500% 500%;
  -webkit-animation: spritex 3s steps(4) 1;
  -webkit-animation-fill-mode: forwards;
  animation: spritex 3s steps(4) 1;
  animation-fill-mode: forwards;
}
}

<div class="container">
<div class="sprite"></div>
</div>

Answer 2

这里实际上有两个问题。首先，步进功能会出现一个一个错误。起始位置不应包含在传递给步进函数的步骤数中。

来自MDN：

  

     

steps(4, end)

第二个问题是，您似乎对background-position中代表的百分比值有不正确的认识。同样，来自MDN：

  

background-position CSS属性设置初始位置，   相对于background-origin定义的背景位置图层   对于每个定义的背景图像。

     

[...]

     

百分比是指背景定位区域的大小减去   背景图像的大小; size是指水平宽度   偏移和垂直偏移的高度

在这种情况下，“背景定位区域的大小”是整个精灵表的大小，“背景图像的大小”是该表中的一个图像的大小。那么在这种情况下，这意味着100％等于精灵表（5-1）中恰好4个空格的宽度，因此25％等于精灵表中正好一个空格的宽度。

这意味着background-position-x: -500%; background-position-y: -400%;不在您认为的位置。这就是为什么动画结尾处显示的精灵是错误的。

所以把所有这些知识放在一起，我们最终得到了这个：

.container {
  width: 64px;
  height: 64px;
  position: relative;
}

@-webkit-keyframes spritex {
  0% {
    background-position-x: 0%;
    background-position-y: 0%;
  }
  20% {
    background-position-x: 100%;
    background-position-y: 0%;
  }
  
  20.01% {
    background-position-x: 0%;
    background-position-y: 25%;
  }
  40% {
    background-position-x: 100%;
    background-position-y: 25%;
  }
  
  40.01% {
    background-position-x: 0%;
    background-position-y: 50%;
  }
  60% {
    background-position-x: 100%;
    background-position-y: 50%;
  }
  
  60.01% {
    background-position-x: 0%;
    background-position-y: 75%;
  }
  80% {
    background-position-x: 100%;
    background-position-y: 75%;
  }
  
  80.01% {
    background-position-x: 0%;
    background-position-y: 100%;
  }
  99.99% {
    background-position-x: 100%;
    background-position-y: 100%;
  }

  100% {
    background-position-x: 100%;
    background-position-y: 100%;
  }
}

.sprite {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url(http://i296.photobucket.com/albums/mm182/CodeH4x0r/explosion17.png);
  background-size: 500% 500%;
  -webkit-animation: spritex 3s steps(4) 1;
  -webkit-animation-fill-mode: forwards;
  animation: spritex 3s steps(4) 1;
  animation-fill-mode: forwards;
}

<div class="container">
  <div class="sprite"></div>
</div>

(View in Codepen)