Question

所以我正在做的是一个CSS动画，当页面加载时，导航元素和主要徽标都从上面下拉（访问www.joeyorlando.me以获得当前动画的实时预览）。

一切都很有效，除非您要调整浏览器的宽度，媒体查询会相应地破坏导航并隐藏主导航以显示汉堡包图标移动导航（仍在进行中）。再次调整窗口大小并使其变大时，动画将重新启动。

有没有办法告诉动画一旦播放一次，再也不播放，只是保持它结束的状态？我尝试使用动画填充模式：前锋;和animation-iteration-count：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你希望停止的元素。

Answer 2

在页面加载时，使用JS检查会话是否已设置，是否未运行动画然后设置会话。当语句再次运行时，它将检测先前设置的会话而不运行动画。

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

2 个答案: