JSFiddle - React, Tailwind, and code Playground

HTML

<div class="man-scale">
  <img class="man-walk" src="http://clipart-library.com/img/1184697.png">
</div>

CSS

.man-walk {
    width: 100px;
    height: 125px;
    position: absolute;
    top: 0;
    left: 50px;

    animation-name: man-walk;
    animation-duration: 0.45s;
    animation-iteration-count: infinite;
}

@keyframes man-walk {
    0% {
        transform: rotate(0deg);
    }

    25% {
        transform: rotate(1.5deg);
    }

    50% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-1.5deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.man-scale {
    width: 100px;
    height: 125px;

    animation-name: man-scale;
    animation-duration: 2s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

/* define the animation */
@keyframes man-scale {
/*     0% {
        transform: translate(0px, 5px) scale(1.1);
    }

    25% {
        transform: translate(0px, 15px) scale(1.5);
    }

    50% {
        transform: translate(0px, 25px) scale(1.7);
    }

    75% {
        transform: translate(0px, 35px) scale(2.0);
    }

    100% {
        transform: translate(0px, 45px) scale(2.3);
    } */
  
    0% {
        transform: translate(0px, 5px);
    }

    25% {
        transform: translate(0px, 15px);
    }

    50% {
        transform: translate(0px, 25px);
    }

    75% {
        transform: translate(0px, 35px);
    }

    100% {
        transform: translate(0px, 45px);
    }
}