style.css

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

body {
    text-align: center;
}

#right-wheel,
#left-wheel {
    animation: wheel 2s infinite linear;
    transform-origin: center;
    transform-box: fill-box;
}

#man-bike {
    animation: bike 1s ease-in-out infinite alternate;
    transform-origin: bottom;
}

#hat {
    animation: hat 1s ease-in-out infinite alternate;
    transform-origin: center;
    transform-box: fill-box;
}

@keyframes wheel{
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

@keyframes bike {
    from  {
        transform: rotateX(0deg);
    }

    to {
        transform: rotateX(20deg);
    }
}

@keyframes hat {
    from {
        transform: translateY(0%) rotateZ(0deg)
    }

    to {
        transform: translateY(20%) rotateZ(20deg) 
    }
}