Why Sprite background animation doesn't work properly?

Question

I'm having issues knowing how to do the right math or formula to make a responsive css sprite. Its a circle with border radius 50%. So its width and padding-bottom are set to 100% to make the circle proportionate.

My issue is getting the sprite to match up and step(16 times) through the animation and work responsively. I can get it work static with px.

.hero_sprite_container {
  width: 100%;
}

.hero_sprite {
  width: 100%;
  padding-bottom: 100%;
  border-radius: 50%;
  background: green url('https://i.imgur.com/F1wpeSB.jpg') no-repeat 0 0;
  background-size: 100%;
  animation: sprite 10s steps(16) infinite;
}

@keyframes sprite {
  to {
    background-position: 0 100%;
  }
}

<div class="hero_image">
  <div class="hero_sprite_container">
    <div class="hero_sprite lazyload"></div>
  </div>
</div>

Here is my code pen so you can see it.

https://codepen.io/gorelegacy/pen/ExxXZge

my sprite - https://i.imgur.com/F1wpeSB.jpg

Answer 1

You are almost there, you need to consider jump-none to get the behavior you want:

.hero_sprite {
  width: 200px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: url('https://i.imgur.com/F1wpeSB.jpg') top/100%;
  animation: sprite 10s steps(16,jump-none) infinite;
}

@keyframes sprite {
  to {
    background-position: bottom;
  }
}

<div class="hero_sprite"></div>

I wrote a small post about that value: https://css-tip.com/steps/