为什么动画播放后图像消失了？

Question

出于某种原因，动画完成后图像会消失吗？ :/

.coin {
    width: 200px;
    height: 200px;
    background-size: cover;
    animation: CoinflipRoll 6s steps(199);
    animation-delay: .5s;
    animation-fill-mode: forwards;
    background-repeat: no-repeat;
    background-image: url("https://i.imgur.com/Mvek2Uy.png");
}

@keyframes CoinflipRoll {
    100% {
        background-position-y: -39800px;
    }
}

<small>Image is 248x12648</small>
<div class="coin"></div>

Answer 1

更正您的代码，如下所示。您不需要很多复杂的值，您需要将正确的值设置为

steps()

。您的图像包含 51 帧而不是 199

.coin {
  width: 200px;
  height: 200px;
  animation: CoinflipRoll 2s steps(51,jump-none) .5s forwards;
  background: url("https://i.imgur.com/Mvek2Uy.png") top/auto 5100%;
}

@keyframes CoinflipRoll {
  100% {
    background-position: bottom;
  }
}

<div class="coin"></div>

Answer 2

动画正在将图片移出框架。看图片 - 之后它仍然在那里，只是移动了所有“动画帧”。因此，在结束之前停止它，但操纵最终值