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()。您的图片包含 50 帧而不是 199

.coin {
  width: 200px;
  height: 200px;
  animation: CoinflipRoll 2s steps(50) .5s forwards;
  background-image: url("https://i.imgur.com/Mvek2Uy.png");
  background-size: 100% auto;
  background-repeat: no-repeat;
}

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

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

Answer 2

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

为什么动画（CSS）后图像消失？

2 个答案: