test.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="assets/bootstrap-5.1.1-dist/css/bootstrap.css">
    <link rel="stylesheet" href="assets/css/style.css">
    <title>TEST</title>
</head>

<body>

    <div id="test-block"><img id="test" src=""></div>
    <!-- <div id="anter-animation-container"></div>
    <div id="anter-animation"></div>
    <div onclick="myMove()" class="btn btn-success w-25">Click me</div>
    <div onclick="myTransition()" class="btn btn-success w-25">Click me2</div>
    <div onclick="myTransition2()" class="btn btn-success w-25">Click me3</div>
    <div onclick="test()" class="btn btn-success w-25">Click me4</div> -->


    <!-- JS Scripts -->
    <script src="http://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $('document').ready(function (){
            $("#test").attr("src", "assets/animation/AnterLogoAnimation3.gif");
            setTimeout(function () {
                $('#test-block').fadeOut(700);
                $('#test').slideUp(500);
            }, 9000); 
        })
               
        
        function test() {
            $("#anter-animation").css('background-color', 'blue');
        }
        function myTransition2() {
            var elem = document.getElementById("anter-animation");
            elem.style.backgroundColor = "red";
            elem.style.width = '50px';
            elem.style.height = '50px';
        }
        function myTransition() {
            var elem = document.getElementById("anter-animation");
            elem.style.backgroundColor = "orange";
            elem.style.width = '100px';
            elem.style.height = '100px';
        }
        function myMove() {
            var elem = document.getElementById("anter-animation");
            var pos = 0;
            var id = setInterval(frame, 10);
            function frame() {
                if (pos == 350) {
                    clearInterval(id);
                } else {
                    pos++;
                    elem.style.top = pos + 'px';
                    elem.style.left = pos + 'px';
                }
            }
        }
    </script>


</body>

</html>