html - CSS 动画不稳定，有什么建议吗？

Question

所以我正在做的是一个 CSS 动画，当页面加载时，导航元素和主 Logo 都会从上方掉落(访问 www.joeyorlando.me 以获取当前动画的实时预览)。

一切都很好，除了以下事实:如果您要调整浏览器的宽度，媒体查询会适本地中断导航并隐藏主导航以显示汉堡图标移动导航(仍在进行中)。当您再次调整窗口大小并使其变大时，动画重新开始。

有什么方法可以基本上告诉动画一旦播放一次，就不再播放并保持它结束时的状态？我尝试使用 animation-fill-mode: forwards;和动画迭代计数: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); 
    } 
} 

Answer 1

这可能不是最好的方法(我对 CSS3 动画不太熟悉)，但你可以使用 JS 来检测 CSS animation end events并删除动画类或尝试添加:transition: none 到您要停止的元素。