CSS Animation being wonky, any suggestions? - html

Question

So what I'm working on is a CSS animation, the nav elements and main logo all drop down from above when the page loads (visit www.joeyorlando.me for a live preview of the current animation).
Everything works great except for the fact that if you were to resize the width of your browser, the media queries break the nav appropriately and hide the main nav to show a hamburger-icon mobile nav (still a work in progress). When you resize the window again and make it larger, the animation restarts.
Is there any way to basically tell the animation that once it plays once, never play again and just hold the state that it ended in? I tried using animation-fill-mode: forwards; and animation-iteration-count: 1; to no avail.
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>About</li>
<li>Background</li>
<li>Research</li>
<li>Travels</li>
<li>Contact Me</li>
</ul>
</nav>
CSS Animation
.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

It may not be the best way (I'm not so familiar with CSS3 animations), but you could use JS to detect CSS animation end events and remove the animation classes or try adding: transition: none to the elements you want to stop.

Answer 2

On page load, use JS to check if a session is set, if it's not run the animation and then set the session. When the statement runs again it will detect the previously set session and not run the animation.