一旦页面加载，我如何让我的弹跳汉堡包菜单在经过一定秒数后停止弹跳？

Question

我是Web Dev的新手，我正在使用不同的在线平台（YouTube，Udemy，StackSkills等）自学。

现在，我正试图专注于学习HTML，CSS和JavaScript / JQuery的基础知识。

我为我正在研究的自定义网站创建了这个汉堡菜单，以帮助我学习，我想尝试在超过一定时间阈值后停止弹跳汉堡包菜单。

我尝试使用JQuery创建一个类，然后我可以使用CSS动画持续时间属性，但它完全停止了反弹。

这就是我使用JQuery和CSS所做的，试图获得我想要的效果，完全停止反弹动画效果，而不是在5秒后停止它：

JQuery

function bounceDuration() {

document.querySelector('.hamburger-menu').classList.toggle('bounce-duration');

};

断续器

.hamburger-menu.bounce-duration {

animation-duration: 5s;

}

在下面，您将找到我拥有的全部当前工作代码（HTML，CSS和JQuery）。如您所见，汉堡包菜单无限期地反弹，我想以某种方式给它一个超时或某种持续时间。任何这方面的帮助都非常感谢。

function sidebarToggle() {

    document.querySelector(".hamburger-menu").addEventListener("click", () => {

        document.querySelector('.hamburger-menu').classList.toggle('bounce-stop');

        document.querySelector(".container").classList.toggle("sidebar-toggle");

    });

}

sidebarToggle()

* {

    margin: 0;

    padding: 0;

    outline: none;

    box-sizing: border-box;

    list-style: none;

    text-decoration: none;

}

.hamburger-menu {

    width: 3rem;

    height: 3rem;

    position: fixed;

    top: 5rem;

    right: 5rem;

    z-index: 200;

    display: flex;

    flex-direction: column;

    justify-content: space-evenly;

    cursor: pointer;

    transition: 0.7s;

}

.hamburger-menu.bounce-stop {

    animation-name: none;

}

.line {

    width: 100%;

    height: 0.2rem;

    background-color: #fff;

    box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);

}

/*

    Hamburger Menu Bounce

    ---------------------

    Description: - Up/Down animation

*/

.hamburger-menu {

    -moz-animation: bounce 1s infinite alternate;

    -o-animation: bounce 1s infinite alternate;

    -webkit-animation: bounce 1s infinite alternate;

    animation: bounce 1s infinite alternate;

    animation-duration: 0.5s;

}

@-moz-keyframes bounce {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-10px);

    }

}

@-o-keyframes bounce {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-10px);

    }

}

Answer 1

将迭代计数设置为（或任何其他数字），而不是：2infinitefunction sidebarToggle() {&nbsp; &nbsp; document.querySelector(".hamburger-menu").addEventListener("click", () => {&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector('.hamburger-menu').classList.toggle('bounce-stop');&nbsp; &nbsp; &nbsp; &nbsp; document.querySelector(".container").classList.toggle("sidebar-toggle");&nbsp; &nbsp; });}sidebarToggle()* {&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; outline: none;&nbsp; &nbsp; box-sizing: border-box;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; text-decoration: none;}.hamburger-menu {&nbsp; &nbsp; width: 3rem;&nbsp; &nbsp; height: 3rem;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 5rem;&nbsp; &nbsp; right: 5rem;&nbsp; &nbsp; z-index: 200;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; justify-content: space-evenly;&nbsp; &nbsp; cursor: pointer;&nbsp; &nbsp; transition: 0.7s;}.hamburger-menu.bounce-stop {&nbsp; &nbsp; animation-name: none;}.line {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 0.2rem;&nbsp; &nbsp; background-color: #fff;&nbsp; &nbsp; box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.2);}/*&nbsp; &nbsp; Hamburger Menu Bounce&nbsp; &nbsp; ---------------------&nbsp; &nbsp; Description: - Up/Down animation*/.hamburger-menu {&nbsp; &nbsp; -moz-animation: bounce 1s 2 alternate;&nbsp; &nbsp; -o-animation: bounce 1s 2 alternate;&nbsp; &nbsp; -webkit-animation: bounce 1s 2 alternate;&nbsp; &nbsp; animation: bounce 1s 2 alternate;&nbsp; &nbsp; animation-duration: 0.5s;}@-moz-keyframes bounce {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-10px);&nbsp; &nbsp; }}@-o-keyframes bounce {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-10px);&nbsp; &nbsp; }}@-webkit-keyframes bounce {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-10px);&nbsp; &nbsp; }}@keyframes bounce {&nbsp; &nbsp; 0% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(0);&nbsp; &nbsp; }&nbsp; &nbsp; 100% {&nbsp; &nbsp; &nbsp; &nbsp; transform: translateY(-10px);&nbsp; &nbsp; }}.sidebar-toggle .hamburger-menu {&nbsp; &nbsp; right: 33rem;&nbsp; &nbsp; background-color: #555;}.header {&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; position: relative;&nbsp; &nbsp; perspective: 100rem;&nbsp; &nbsp; overflow: hidden;&nbsp; &nbsp; background-color: rgba(0, 0, 0, .8);}.sidebar {&nbsp; &nbsp; width: 40rem;&nbsp; &nbsp; height: 100vh;&nbsp; &nbsp; position: fixed;&nbsp; &nbsp; top: 0;&nbsp; &nbsp; right: -40rem;&nbsp; &nbsp; background-color: #ffffff;&nbsp; &nbsp; transition: right 0.5s;}.sidebar-toggle .sidebar {&nbsp; &nbsp; right: 0;}<!DOCTYPE html><html><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><body>&nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="hamburger-menu">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="line line-1"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="line line-2"></div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="line line-3"></div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <header class="header"></header>&nbsp; &nbsp; &nbsp; &nbsp; <section class="sidebar"></section>&nbsp; &nbsp; </div></body></html>

Answer 2

只需设置一些数字而不是 ininfinityanimation.hamburger-menu {&nbsp; &nbsp; -moz-animation: bounce 1s 5 alternate;&nbsp; &nbsp; -o-animation: bounce 1s 5 alternate;&nbsp; &nbsp; -webkit-animation: bounce 1s 5 alternate;&nbsp; &nbsp; animation: bounce 1s 5 alternate;&nbsp; &nbsp; animation-duration: 0.5s;}它是动画迭代计数