CSS анимация шаткая, какие-нибудь предложения?

Так что я работаю над CSS-анимацией, элементы навигации и главный логотип все выпадают сверху при загрузке страницы (посетите www.joeyorlando.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); 
    } 
}
Источник

2 ответа

Решение

Возможно, это не самый лучший способ (я не очень знаком с анимацией CSS3), но вы можете использовать JS для обнаружения конечных событий анимации CSS и удаления классов анимации или попробуйте добавить: transition: none к элементам, которые вы хотите остановить.

Источник

При загрузке страницы используйте JS, чтобы проверить, установлен ли сеанс, не запущена ли анимация, а затем установите сеанс. Когда оператор выполняется снова, он обнаружит ранее установленный сеанс и не запустит анимацию.

Источник
Другие вопросы по тегам