CSS-анимация / спрайт не останутся на последнем изображении - PullRequest
Новая
       25

CSS-анимация / спрайт не останутся на последнем изображении

0 голосов
/ 11 ноября 2018

У меня есть код ниже 

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;

, которые кажутся предлагаемыми исправлениями, не работают для меня.

1 Ответ

0 голосов
/ 11 ноября 2018

Вы должны исправить последнее значение background-position. Ваше изображение имеет ширину 974px, поэтому использование -974px эквивалентно 0px, так как есть повтор, поэтому оно начнется снова с первого. Вам нужно уменьшить его, а затем использовать steps(4). Вы также можете исправить width div для более точного результата: 

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