时间戳

首页 > 解决方案 > CSS 动画/精灵表不会停留在最后一张图片上

html - CSS 动画/精灵表不会停留在最后一张图片上

问题描述

我有以下代码

div.sprite {
  width: 200px;
  height: 194px;
  background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
  animation: play 1s steps(5) 1;
  animation-fill-mode: forwards;
}

@keyframes play {
  from {
    background-position-x: -0px;
  }
  to {
    background-position-x: -974px;
  }
}
<div class="sprite">

</div>

问题是我无法让它在最后一帧 (5) 停止（动画似乎也有点偏离）

它一直回到第一个，我用谷歌搜索了它，发现很多其他人都有同样的问题，但是将步骤从 5 更改为 4，或设置

animation-fill-mode: forwards;

这似乎是建议的修复对我不起作用。

标签： htmlcsscss-animationscss-sprites

解决方案

您应该更正背景位置的最后一个值。您的图像的宽度为974pxso using-974px相当于0px因为有重复，所以它将在第一个上重新开始。您需要减少它，然后使用steps(4). 您还可以更正widthdiv 以获得更准确的结果：

div.sprite {
  width: 194.8px; /* (974/5) */
  height: 194px;
  background-image: url("https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png");
  animation: play 1s steps(4) forwards;
}

@keyframes play {
  from {
    background-position-x: -0px;
  }
  to {
    background-position-x: -779.2px; /*974 - (974/5)*/
  }
}

img {
 border:1px solid;
 background:repeating-linear-gradient(to right,transparent 0px,transparent calc(100%/5 - 2px),#000 calc(100%/5 - 2px),#000 calc(100%/5));
}
<img src="https://www.giftofspeed.com/sprite-generator/sprites/8a7a791467c5d7a9eb8050cdd3dee4fa.png" height=50>
<div class="sprite"></div>

推荐阅读