Моя анимация охватывает ссылки после окончания анимации

Question

Я хочу анимировать мою верхнюю навигацию при загрузке страницы. Похоже, я хочу, чтобы он выглядел, но он закрывает мои ссылки в меню после завершения анимации. Как видно из моего кода ниже, я пытался решить эту проблему с помощью непрозрачности, отображения и различных z-значений, но я не могу заставить его работать без потери анимации.

Кто-нибудь знает? Смотрите мой грязный код ниже :)

Рад за всю помощь, которую я могу получить!

<div class="topnav" style="z-index:200;">
    <a class="logo" href="OpenStudio.html" style="z-index:300;">Open Studio</a>
    <a class="paris" target="_blank" href="https://openstudioparis.com/" style="z-index:300;">Paris</a>
    <div class="wordanimation" style="z-index:300;">
        <span class="stockholm" style="z-index:300;">Stockholm</span>
        <span class="comment" style="z-index:300;">You're here</span>
    </div>
    <a href="OpenStudio_contact.html" style="z-index:300;">Contact</a>
    <a href="OpenStudio_work.html" style="z-index:300;">Work</a>    
    <a href="OpenStudio_studio.html" style="z-index:300;">Studio</a>  
</div>

<div class="loader-wrapper" style="z-index:200;">
    <span class="loaderlogo" style="z-index:200;">
        Open Studio 
    </span> 
    <span class="loader" style="z-index:200;"></span>
</div>

/* MENU BAR */
.topnav {
    position: fixed !important;
    overflow: hidden;
    background-color: rgba(243, 243, 243, 1);
    height: 36px !important;
    width: 100%;
    }

    .topnav .logo {
        float: left !important;
        overflow: hidden; 
        color: black;
        text-align: left !important;
        padding: 12px 17px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 5;
        letter-spacing: 0.8px;
        text-decoration: none;
        }  

    .topnav a {
        float: right;
        overflow: hidden; 
        position: relative;
        color: black;
        text-align: center;
        padding: 12px 2%;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 0.8px;
        }

    /* word animation Stockholm/You're here */
    .wordanimation { 
        color: rgba(0, 0, 255, 1); 
        float: right;
        text-align: center;
        padding: 12px 10px;
        text-decoration: none;
        font-size: 14px;
        letter-spacing: 1.2px;
        }

        .wordanimation .comment { 
            display: none; 
        }
        .wordanimation:hover .stockholm { 
            display: none; 
        }
        .wordanimation:hover .comment { 
            display: inline; 
        }

/*MENU BAR LOADER*/
.loader-wrapper {
    display: none;
    opacity: 0;
    width: 100%;
    height: 100%;
    position: fixed;
    display: flex;
    top: 0;
    left: 0;
    background-color: rgba(232, 233, 234, 1);
    animation: topback 2s linear;
    -webkit-animation: topback 2s linear;
    animation-iteration-count: 1;
    }

    .loader {
        display: inline;
        height: 36px;
        position: fixed;
        top: 0;
        left: 0;
        background-color: rgba(0, 0, 255, 1);
        animation: topmove 2s  linear;
        -webkit-animation: topmove 2s linear;
        animation-iteration-count: 1;
    }
    .loaderlogo {
        float: left !important;
        overflow: hidden; 
        width: 100% !important;
        color: black;
        text-align: left !important;
        padding: 12px 17px;
        text-decoration: none;
        font-size: 14px;
        font-weight: 5;
        letter-spacing: 0.8px;
        text-decoration: none;
        animation: toplogo 0.1s ;
        -webkit-animation: toplogo 0.1s;
        animation-iteration-count: 1;
        }  

    @keyframes topback {
        0%   {position: absolute;
                display: inline;
                opacity: 1}
        99.9% {opacity: 1;}
        100% {opacity: 0;}
        101% {display: none;
                opacity: 0;}
        }

    @keyframes toplogo {
        0%   {position: relative;
                opacity: 1;}
        89% {opacity: 1;}
        99.9% {opacity: 0;}
        100% {display: none;
                opacity: 0;}
        }

    @keyframes topmove {
        0%   {width: 0%;
                opacity: 1;}
        99.9% {opacity: 1;}
        100% {width: 100%;}
        100% {opacity: 0;
                display: none;}
        }