#gorilla {
    background: url("../images/gorilla.svg?v=1.1.0") no-repeat;
    width: 100px;
    height: 200px;
    display: block;
    background-position: 0 0;
    position: fixed;
    top: 240px;
    left: calc(25% - 78px);
    transform: scale(.75);
}

@media screen and (min-width: 1024px) {
    #gorilla {
        transform: none;
        left: calc(25% - 88px);
    }
}

#gorilla.climbing {
    animation: climb;
    animation-duration: .5s;
    animation-timing-function: steps(1, end);
    animation-iteration-count: infinite;
}

@keyframes climb {
    0% {
        background-position: 0px 0px;
    }
    12.5% {
        background-position: -100px 0px;
    }
    25% {
        background-position: -200px 0px;
    }
    50% {
        background-position: -300px 0px;
    }
    75% {
        background-position: -200px 0px;
    }
    87.5% {
        background-position: -100px 0px;
    }
    100% {
        background-position: 0px 0px;
    }
}