Search code examples
csscss-animations

I can't get my CSS animation of 5 sprite right

I'm trying to animate a 5 sprites little hamster:

enter image description here

I'm new to CSS animations and can't get it right. There are 5 sprites and I'm asking for 5 steps from 0% to 100%

https://codepen.io/Offirmo/pen/ZEPaqaN

<head>
    <meta charset="UTF-8">
    <style>
        #anim01 {
            width: 188px; /* Width of one frame */
            height: 203px; /* Height of one frame */

            background-image: url(black_skinny_hamster--row.png);
            background-position: 0 0;
            animation-timing-function: steps(5);
            animation-duration: 2s;
            animation-iteration-count: infinite;
            animation-name: row;
        }

        @keyframes row {
            from { background-position:   0  0; }
            to   { background-position: 100% 0; }
        }
    </style>
</head>
<body>
    <div id="anim01"></div>
</body>

However the split is all over the place:

enter image description here

In Firefox animation inspector, It seems that the animation goes 0% 20% 40% 60% 80% and then loop over skipping the 100% step:

enter image description here

I would expect 0% 25% 50% 75% 100%

I scoured MDN for clues, tried 6 steps, 4 steps. With 4 steps I get the 4 first sprites correct but never see the 5th sprite. I tried changing the fill mode as suggested here Maintaining the final state at end of a CSS animation but that's not really what we want.

Of course if a cheat and ask for animating from 0% to 125% it works, but that's very confusing.

It should be simple, what am I missing?

Solution

  • You background is taking 5x100% of the element width so to make a full turn you need to consider this formula p = s / (s - 1) where s=5 so you get p = 1.25 which is the 125%

    I wrote a detailed answer to explain how to got the above formula: Using percentage values with background-position on a linear-gradient

    #anim01 {
  width: 188px; /* Width of one frame */
  height: 203px; /* Height of one frame */
  background-image: url(https://www.offirmo.net/x/share/202401-black_skinny_hamster--row.png);
  animation-timing-function: steps(5);
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-name: row;
}

@keyframes row {
  to {
    background-position: 125% 0;
  }
}
    <div id="anim01"></div>