html - CSS动画很古怪，有什么建议吗？

所以我正在做的是一个CSS动画，当页面加载时，nav元素和主徽标都会从上面下拉下来（访问www.joeyorando.me获取当前动画的实时预览）。
一切都很好，除了这样一个事实：如果你要调整浏览器的宽度，媒体查询会适当地打断导航，并隐藏主导航以显示汉堡图标移动导航（仍在进行中）。再次调整窗口大小并使其变大时，动画将重新启动。
有没有什么方法可以基本上告诉动画，一旦它播放一次，就再也不播放了，只是保持它结束的状态？我尝试使用动画填充模式：前进；动画迭代计数：1；但没有效果。
HTML格式

<header>
            <div id="hamburger">
              <div></div>
              <div></div>
              <div></div>
            </div>
            <div class="logo logo-animated bounceInDown">
                    <h1>Joey Orlando</h1><br>
                    <h2>Cancer Researcher | Web Developer</h2>
            </div>
                <nav class="normalNav" id="normalNav">
                    <ul>
                        <li><a href="#about" class="about-animated bounceInDown">About</a></li>
                        <li><a href="#background" class="background-animated bounceInDown">Background</a></li>
                        <li><a href="#research" class="research-animated bounceInDown">Research</a></li>
                        <li><a href="#travels" class="travels-animated bounceInDown">Travels</a></li>
                        <li><a href="#contact" class="contact-animated bounceInDown">Contact Me</a></li>
                    </ul>
                </nav>

CSS动画

.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.about-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.background-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.3s;
    animation-delay: 0.3s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.research-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.travels-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.contact-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1.2s;
    animation-delay: 1.2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

.logo-animated {
    -webkit-animation-duration: 2s;
    -webkit-animation-delay: 1.5s;
    animation-delay: 1.5s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-iteration-count: 1;
    -moz-animation-iteration-count: 1;
    animation-iteration-count: 1;
}

/**************************
ANIMATION KEYFRAMES - NAVIGATION
**************************/

@-webkit-keyframes bounceInDown {
   0% {
       opacity: 0;
        -webkit-transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px);
    }
    80% {
        -webkit-transform: translateY(-10px);
    }
    100% {
        -webkit-transform: translateY(0);
    }
}

@keyframes bounceInDown {
    0% {
        opacity: 0;
        transform: translateY(-2000px);
    }
    60% {
        opacity: 1;
        transform: translateY(30px);
    }
    80% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

最佳答案

这可能不是最好的方法（我不太熟悉CSS3动画），但是可以使用JS检测CSS animation end events并删除动画类，或者尝试向要停止的元素添加：transition: none。