анимация переходит от одного к другому

Question

Я пытаюсь добавить анимацию, в которой логотип будет скользить по центру, после чего сработает другая анимация, использующая задержку, но после первой анимации она привязывается к чистой после того, как ее позиция относительно позиции

вот мой код:

        <h1 class="intro-title">
            Hello world
        </h1>

    <h4 class="scroll-down">Scroll Down</h4>

    <div class="arrow">
        <i class="fas fa-arrow-down"></i>
    </div>



    <div id="color1"></div>
    <div id="color2"></div>
    </div>

     <img class="logo" src="logo/logo.png">


    <div id="scroll">
        <button class="intro-button">Check it out!</button>   
    </div>

function logoShift() {
    $('.logo').css({ 
        transform: 'translateY(-95%)',
        right: '90px',
        width: '300px',
        height: '300px',
        position: 'relative'
    });



}