CSS Animation being wonky, any suggestions?

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><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 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); 
    } 
}

score 1 · Accepted Answer · edited May 23 '17 at 12:27

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.

edited May 23 '17 at 12:27

Community

1
1

answered Aug 25 '14 at 23:15

OneHoopyFrood

3,829
3
24
39

score 0 · Answer 2 · answered Aug 30 '14 at 16:14

0

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.

answered Aug 30 '14 at 16:14

Edd Aslin

294
4
11

CSS Animation being wonky, any suggestions?

2 Answers2