How to animate cat's steps with CSS?

Question

I want to imitate cat steps with CSS animation. I'm trying to animate each paw(img element in div container) in the container and make another animation for the container itself from the bottom to the top. But it looks just like a sliding.

Using HTML div element with .animation-container class to make a block with cat-paws images for CSS animation. Using CSS style a container for positioning and limit width and height.

/* CSS container setup */

.animation-container {
  position: absolute;
  bottom: -200px;
  right: 100px;
  width: 350px;
  height: 400px;
  /*opacity: 0;*/
}

.paw-1,
.paw-2,
.paw-3,
.paw-4 {
  margin-right: 20px;
  width: 100px;
  height: 100px;
}

.paw-1,
.paw-2 {
  margin-bottom: 100px;
}


/* CSS animation for each paw start */

.animation-container {
  /* animation: 5s walk forwards; */
}

.paw-2 {
  animation: 1s steps infinite forwards;
}

.paw-3 {
  animation: 1s steps 0.5s infinite forwards;
}

.paw-1 {
  animation: 1s steps 1s infinite forwards;
}

.paw-4 {
  animation: 1s steps 1.5s infinite forwards;
}

@keyframes steps {
  /*Movement*/
  0% 25% {
    transform: translate(0, -100px);
  }
  /*Pause*/
  25% 50% {
    transform: translate(0, -100px);
  }
  /*Movement*/
  50% 75% {
    transform: translate(0, -200px);
  }
  /*Pause*/
  100% {
    transform: translate(0, -200px);
  }
}


/*CSS animation for .animation-container*/

@keyframes walk {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(0, -100vh);
  }
}

<!-- Container for CSS animation -->
<div class="animation-container">
  <img class="paw-1" src="https://via.placeholder.com/100x100">
  <img class="paw-2" src="https://via.placeholder.com/100x100">
  <img class="paw-3" src="https://via.placeholder.com/100x100">
  <img class="paw-4" src="https://via.placeholder.com/100x100">
</div>

Answer 1

Solution

CSS animations don't work like that. Instead of setting a period from which the animation changes like 0% 25% {...} you have to change it to be a value at a specific keyframe, like:

@keyframes steps {
    /*Pause start*/
0% {
    transform: translate(0, -100px);
}
/*Pause end*/
25% {
    transform: translate(0, -100px);
}
/*Movement start*/
50% {
    transform: translate(0, -200px);
}
/*Movement end*/
100% {
    transform: translate(0, -200px);
}
}
/*you can edit the percentages ofc*/

I highly recommend using an IDE like IntelliJ IDEA or Vs Code to fix errors like this and many more.

Extra tips

Also setting the animation-fill-mode: forwards is useless when the iteration-count: infinite since it will never end (unless you are planning to edit that in JavaScript or elsewhere).

I also wouldn't recommend using transform: translate(); for animation, but use margin-top instead since translate might be hard to debug.