himu_style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: url(background.jpg);
    height: 100vh;
    display: flex;
}
.walking {
    margin: auto;
    width: 300px;
    height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    position: relative;
}
.head {
    width: 50px;
    height: 50px;
    background-color: white;
    border-radius: 50%;
    position: relative;
    left: 18px;
    top: 10px;
    animation: headChange 1s infinite 1.6s ease-in;
}
.body {
    width: 40px;
    height: 100px;
    background-color: yellow;
    border-radius: 60px 10px 0 0;
    animation: bodyChange 1s infinite 1.6s ease-in;
}
.firstLeg, .secondLeg {
    width: 35px;
    height: 10px;
    background-color: white;
    border-radius: 20px 50px 50px 20px;
    position: relative;
    top: 55px;
    left: 20px;
    animation: walk 2s infinite linear;
}
.secondLeg {
    top: 25px;
    animation-delay: 1s;
}
.shadow {
    width: 100px;
    height: 10px;
    background-color: rgba(197, 82, 82, 0.2);
    border-radius: 50%;
    animation: shadowChange 1s infinite 1.6s linear;
}
@keyframes headChange {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(7px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes bodyChange {
    0% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(3px);
    }
    100% {
        transform: translateY(0px);
    }
}

@keyframes walk {
    0% {
        transform: translateX(0px) rotate(0deg);
    }
    20% {
        transform: translateX(-20px) rotate(0deg);
    }
    40% {
        transform: translate(-40px, 0px) rotate(0deg);
    }
    60% {
        transform: translate(-30px, -10px) rotate(35deg);
    }
    90% {
        transform: translate(10px, -7px) rotate(-35deg);
    }
    100% {
        transform: translateX(0px);
    }
}

@keyframes shadowChange {
    0% {
        width: 100px;
    }
    50% {
        width: 110px;
    }
    100% {
        width: 100px;
    }
}