I’m trying to follow a Kevin Powell tutorial to make an animation of drops revealing a title. However, I’m having a bug and I think I tried everything I could think of.

I’m using CSS Animations with steps. I created a long image (44160px in width x 1080px in height) with 23 different frames. It should work, however the animation is slowly shifting to the right of my screen each step, showing a bit of another frame, making it look bad.

I tried to play with the width and height, then with the size of the mask-image,… nothing seems to help.

To debug this, I made the mask-image from the tutorial into a background-image to see what’s going on. The background-image in the tutorial (which is meant to be the final image at the end of the animation) is replaced by an image in the HTML directly.

You’ll find my code right there, you have to hover the title to see the animation :

body {
  background: black;
}

img {
  max-width: 100%;
}

.mask-container {
  position: relative;
  width: 500px;
}

.color-image {
  inset: 0;
  position: absolute;
/*   background-image: url(https://i.imgur.com/HDGhoao.png);
  background-size: cover; */
  background: url(https://i.imgur.com/i7XvUdO.jpeg) no-repeat;
  background-size: cover;
  background-position: 0% 0%;
  mask-mode: luminance;
  
  transition:
    background-position;
}

.color-image:hover {
  animation:
    cd-sprite 23s steps(23) forwards;
}

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

<div class="mask-container">
  <div class="color-image">
    <img src="https://i.imgur.com/HDGhoao.png" alt="">
  </div>
  <img src="https://i.imgur.com/GR7rFYL.png" alt="">
</div>

Can somebody tell me what I’m doing wrong ?

Thank you so much for your time.