一个元素中的动画无意中影响了另一个元素的动画

I'm trying to add the animation to the element with id "welcome", the name of the animation is "welcome-fade-right". But when I assign the animation to "welcome" in the css, another element "menu-toggle" is also following the same animation, which is not intentional, and this is making "menu-toggle" move outside the screen. And as soon as I remove the animation from the "welcome" element then the "menu-toggle" animates as expected.

Also, when I change the animation of "welcome" from moving right to move up, the issue is again solved, and the "menu-toggle" is animating just as expected.

This implies the motion of "welcome" towards right only is affecting the "nav" animation.

这是HTML代码的主要部分...

<header>
    <nav>
        <a id="logo" href="#"><h1>My logo</h1></a>
        <ul id="menu">
            <li><a class="link-button" href="#">HOME</a></li>
            <li><a class="link-button" href="#">SIGN IN</a></li>
            <li><a class="link-button" href="#">SIGN UP</a></li>
            <li><a class="link-button" href="#">ABOUT</a></li>
            <li><a class="link-button" href="#">CONTACT</a></li>
        </ul>
        <div id="menu-toggle">
            <div id="menu-toggle-burger"></div>
        </div>
    </nav>

    <h1 id="welcome">
        WELCOME TO<br>MY WEBSITE
    </h1>
</header>

And below are the CSS properties of "nav", "menu-toggle" and "welcome" ...

nav{
    position: fixed;
    /* position: sticky; */
    width: 100%;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    height: 70px;

    transform: translateY(-20px);
    -ms-transform: translateY(-20px);
    opacity: 0;

    transition: backdrop-filter, background-color 0.2s ease-in-out, height 0.2s ease-in-out;
    animation: nav-fade-down 0.8s forwards 4.9s ease-in-out; /* adding the animation here */
}

#menu-toggle{
    position: relative;
    justify-content: center;
    align-items: center;
    height: 30px;
    cursor: pointer;
    margin: 18px 25px;
    display: none;
    transform: translateX(-10px);
    -ms-transform: translateX(-10px);
}

#menu-toggle-burger{
    height: 5px;
    width: 28px;
    background-color: #ffffff;
    border-radius: 5px;
    transition: all 0.35s ease-in-out;
}

#menu-toggle-burger::before,
#menu-toggle-burger::after{
    position: absolute;
    content: "";
    display: inline-block;
    background-color: #ffffff;
    height: 5px;
    width: 28px;
    border-radius: 5px;
    transition: all 0.35s ease-in-out;
}

#menu-toggle-burger::before{
    transform: translateY(-10px);
    -ms-transform: translateY(-10px);
}

#menu-toggle-burger::after{
    transform: translateY(10px);
    -ms-transform: translateY(10px);
}

#menu-toggle.open #menu-toggle-burger{ /* using this in javascript */
    transform: translateX(-8px);
    -ms-transform: translateX(-8px);
}

#menu-toggle.open #menu-toggle-burger::before{ /* using this in javascript */
    transform: translate(16px, -10px);
    -ms-transform: translate(16px, -10px);
}

#menu-toggle.open #menu-toggle-burger::after{ /* using this in javascript */
    transform: translate(16px, 10px);
    -ms-transform: translate(16px, 10px);
}

nav.nav-burger-active{ /* using this in javascript */
    height: 400px;
}

#menu.menu-burger-active{ /* using this in javascript */
    transition: all 0.5s ease-in-out;
    opacity: 1;
}

#welcome{  /* here's the style for welcome element */
    position: absolute;
    color: #ffffff;
    font-size: 550%;
    line-height: 150%;
    left: 0%;
    top: 60%;
    opacity: 0;
    border: 2px solid salmon;
    animation: welcome-fade-right 1s forwards 6s ease-in-out; /* adding the animation here */
}

@media only screen and (max-width: 900px){ /* some media queries so that the burger button appears*/
    #menu{
        width: 100%;
        position: absolute;
        display: block;
        margin-top: 50px;
        opacity: 0;
        text-align: center;
    }

    #menu li{
        display: block;
        margin-top: 40px;
    }

    #menu-toggle{
        display: flex;
    }
}

And below are my animations for "nav" and "welcome" ...

@keyframes nav-fade-down{
    to{
        transform: translateY(0);
        -ms-transform: translateY(0);
        opacity: 1;
    }
}

@keyframes welcome-fade-right{
    to{
        left: 6%;
        opacity: 1;
    }
}

Here's the view of the menu-toggle floating outside the screen (when the animation is applied to "welcome".

Here's the view of the menu-toggle floating outside the screen (when the animation is applied to "<code>welcome</code>"

谢谢你的时间。