CSS3 动画不会在最后一帧停止

Question

我遇到了一个问题，我的 sprite-sheet 动画不会在最后一帧停止 - 我已经将 animation-iteration-count 更改为“1”并且还更改了 animation-fill-mode 到 'forwards'，但它似乎不起作用。

动画也没有回到第一帧，它运行到最后，然后在精灵的最后一行跳回第一帧sheet。

所以我觉得我快到了，但也许我错过了什么？

我在这里整理了一个例子来演示。

.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;
}
}

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

(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:

The background-position CSS property sets the initial position, relative to the background position layer defined by background-origin for each defined background image.

[...]

Percentages refer to the size of the background positioning area minus size of background image; size refers to the width for horizontal offsets and to the height for vertical offsets

在这种情况下，"size of the background positioning area" 是整个精灵的大小 sheet，而 "size of background image" 是 sheet 中的一个图像的大小。那么在这种情况下，这意味着 100% 正好等于 sprite sheet (5 - 1) 中 4 spaces 的宽度，因此 25% 正好等于精灵 sheet.

中的一个 space

这意味着 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)

CSS3 动画不会在最后一帧停止

CSS3 animation won't stop on the last frame

css

animation

css-animations