切换浏览器中的选项卡后延迟动画

Question

我有一个飞机动画，当飞机到达城市时，它会打开有关城市的信息并更改网站的背景等等，但是当我单击浏览器中的另一个选项卡然后返回到我的网站上那些弹出窗口的时机混乱了，我该如何解决？这是我的整个HTML代码，如果您出于任何原因也需要CSS，请写信给我，谢谢您，并度过愉快的一天。

附言我还链接了bootstrap，css，jquery等。但是此站点不允许我在下面的代码中显示它。

我的网站：http://pouze.kvalitne.cz/blog
我的代码：`

<!-- -----*-----NAVIGAČNÍ MENU-----*----- -->
<div class="menu-btn" id="burger">
    <div class="menu-btn__burger"></div>
</div>
<!-- Start Home Section -->
<div id="home">
    <div class="airplane"></div>
    <div class="bg" id="bg">
        <img src="img/transparent.png">
    </div>
    <div class="london" id="london_point">
        <img src="img/point.png" width="40px" id="london_point">
    </div>
    <div class="london_info" id="london_info">
        <li>
            <div class="london_speech"></div>
            <h2>London</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Phasellus faucibus molestie nisl.
                <a href="#london">Read more...</a>
            </p>
        </li>
    </div>
    <div class="washington">
        <img src="img/point.png" width="40px" id="washington_point">
    </div>
    <div class="washington_info" id="washington_info">
        <li>
            <div class="washington_speech"></div>
            <h2>Washington D.C.</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Phasellus faucibus molestie nisl.
                <a href="#washington">Read more...</a>
            </p>
        </li>
    </div>
    <div class="brasilia">
        <img src="img/point.png" width="40px" id="brasilia_point">
    </div>
    <div class="brasilia_info" id="brasilia_info">
        <li>
            <div class="brasilia_speech"></div>
            <h2>Brasília</h2>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Phasellus faucibus molestie nisl.
                <a href="#brasilia">Read more...</a>
            </p>
        </li>
    </div>
</div>
<!-- End Home Section -->
<!-- Start About Us Section -->

    <div class="about-container">
        <div class="about-text">
            <p>About our BLOG</p>
            <p>...Half programming rest traveling</p>
            <p>We enjoy traveling, especially to very different places. ...</p>
            <p>
                Shipton's traveling companion, Penelope Something, hysterically filled in what little she knew to Jake Weller and Emile Corday, both of whom visited the patient at the hospital. ...
            </p>
            <button>See more</button>
        </div>
    </div>
    <div class="container_one"></div>
<!-- End About Us Section -->
<!-- Start Video Section -->
<div class="about-container_two">
    <div class="about-text_">
        <p>What is our purpose</p>
        <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <iframe width="889" height="369" src="https://www.youtube.com/embed/BtNAX36j1c4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                    <!-- <img src="../blog/img/unnamed.jpg" class="d-block w-100" alt="..." />-->
                </div>
                <div class="carousel-item">
                    <iframe width="889" height="369" src="https://www.youtube.com/embed/TYHh5PLcReY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
                <div class="carousel-item">
                    <iframe width="889" height="369" src="https://www.youtube.com/embed/EwmvBnR_xtA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
                </div>
            </div>
            <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
</div>
<!-- End Video Section -->
<!-- Start Copyright Section -->
<div class="card text-center" style="margin-top: 50%;">
    <div class="card-footer text-muted">
        &copy; Michal & Kuba
        <p>2020</p>
    </div>
</div>
<!-- End Copyright Section -->
<script src="js/main.js"></script>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

<script>
    var washington_start = setTimeout(washington_timer, 10000);
    var london_stop;
    var washington_start;
    var washington_stop;
    var brasilia_start;
    var brasilia_stop;

    function washington_timer() {
        document.getElementById("washington_info").style.opacity = '1';
        document.getElementById("washington_info").style.visibility = 'visible';
        document.getElementById("washington_info").style.transition = '.5s';
        document.getElementById("washington_info").style.zIndex = '4';
        document.getElementById("washington_info").style.backgroundColor = '#00aabb';
        document.getElementById("washington_info").style.scale = '1';
        document.getElementById("bg").style.backgroundImage = "url('img/washington.jpg')";
        document.getElementById("bg").style.backgroundSize = 'cover';
        document.getElementById("bg").style.transition = '1s';
        washington_stop = setTimeout(washington_stoper, 3400);
    }

    function washington_stoper() {
        document.getElementById("washington_info").style.opacity = '0';
        document.getElementById("washington_info").style.visibility = 'hidden';
        document.getElementById("washington_info").style.zIndex = '2';
        document.getElementById("washington_info").style.scale = '0';
        document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
        document.getElementById("bg").style.transition = '1s';
        brasilia_start = setTimeout(brasilia_timer, 4250);
    }

    function brasilia_timer() {
        document.getElementById("brasilia_info").style.opacity = '1';
        document.getElementById("brasilia_info").style.visibility = 'visible';
        document.getElementById("brasilia_info").style.transition = '.5s';
        document.getElementById("brasilia_info").style.zIndex = '4';
        document.getElementById("brasilia_info").style.backgroundColor = '#00aabb';
        document.getElementById("brasilia_info").style.scale = '1';
        document.getElementById("bg").style.backgroundImage = "url('img/brasilia.jpg')";
        document.getElementById("bg").style.transition = '1s';
        brasilia_stop = setTimeout(brasilia_stoper, 6000);
    }

    function brasilia_stoper() {
        document.getElementById("brasilia_info").style.opacity = '0';
        document.getElementById("brasilia_info").style.visibility = 'hidden';
        document.getElementById("brasilia_info").style.zIndex = '2';
        document.getElementById("brasilia_info").style.scale = '0';
        document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
        document.getElementById("bg").style.transition = '1s';
        london_start = setTimeout(london_timer, 10000);
    }

    function london_timer() {
        document.getElementById("london_info").style.opacity = '1';
        document.getElementById("london_info").style.visibility = 'visible';
        document.getElementById("london_info").style.transition = '.5s';
        document.getElementById("london_info").style.zIndex = '4';
        document.getElementById("london_info").style.backgroundColor = '#00aabb';
        document.getElementById("london_info").style.scale = '1';
        document.getElementById("bg").style.transition = '1s';
        document.getElementById("bg").style.backgroundImage = "url('img/london.jpg')";
        london_stop = setTimeout(london_stoper, 6000);
    }

    function london_stoper() {
        document.getElementById("london_info").style.opacity = '0';
        document.getElementById("london_info").style.visibility = 'hidden';
        document.getElementById("london_info").style.zIndex = '2';
        document.getElementById("london_info").style.scale = '0';
        document.getElementById("bg").style.transition = '1s';
        document.getElementById("bg").style.backgroundImage = "url('img/chata_blured.jpg')";
        washington_start = setTimeout(washington_timer, 10000);
    }
</script>

`