Javascript 动画从一个跳到另一个

我正在尝试添加一个动画，其中一个徽标将滑动到中间，然后另一个动画将在此之后使用延迟启动，但在第一个动画之后，它将捕捉到网络上，在具有“作为相对位置”之后

这是我的密码：

        <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'
    });



}

你好，世界
向下滚动
过来看！
函数logoShift（）{
$（'.logo'）.css（{
转换：“translateY（-95%）”，
右：'90px'，
宽度：“300px”，
高度：“300px”，
位置：'相对'
});
}

你可以使用一个库来实现这一点，比如WOW.js，或者如果你想编写这个自定义的，请告诉我。我已经尝试过了，但也没有达到我想要的效果，我正在寻找自定义的方法，我可以让它按照我的需要工作，除了快照部分（如果有意义的话）