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

Question

我是Web Dev的新手，我正在使用不同的在线平台（YouTube，Udemy，StackSkills等）自学。现在，我正试图专注于学习HTML，CSS和JavaScript / JQuery的基础知识。我为我正在研究的自定义网站创建了这个汉堡菜单，以帮助我学习，我想尝试在超过一定时间阈值后停止弹跳汉堡包菜单。我尝试使用JQuery创建一个类，然后我可以使用CSS动画持续时间属性，但它完全停止了反弹。这就是我使用JQuery和CSS所做的，试图获得我想要的效果，完全停止反弹动画效果，而不是在5秒后停止它：JQueryfunction 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

将迭代计数设置为（或任何其他数字），而不是：2infinite

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 2 alternate;

    -o-animation: bounce 1s 2 alternate;

    -webkit-animation: bounce 1s 2 alternate;

    animation: bounce 1s 2 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);

    }

}

@-webkit-keyframes bounce {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-10px);

    }

}

@keyframes bounce {

    0% {

        transform: translateY(0);

    }

    100% {

        transform: translateY(-10px);

    }

}

.sidebar-toggle .hamburger-menu {

    right: 33rem;

    background-color: #555;

}

.header {

    width: 100%;

    height: 100vh;

    position: relative;

    perspective: 100rem;

    overflow: hidden;

    background-color: rgba(0, 0, 0, .8);

}

.sidebar {

    width: 40rem;

    height: 100vh;

    position: fixed;

    top: 0;

    right: -40rem;

    background-color: #ffffff;

    transition: right 0.5s;

}

.sidebar-toggle .sidebar {

    right: 0;

}

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8" />

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

<body>

    <div class="container">

        <div class="hamburger-menu">

            <div class="line line-1"></div>

            <div class="line line-2"></div>

            <div class="line line-3"></div>

        </div>

        <header class="header"></header>

        <section class="sidebar"></section>

    </div>

</body>

</html>

Answer 2

只需设置一些数字而不是 ininfinityanimation

.hamburger-menu {

    -moz-animation: bounce 1s 5 alternate;

    -o-animation: bounce 1s 5 alternate;

    -webkit-animation: bounce 1s 5 alternate;

    animation: bounce 1s 5 alternate;

    animation-duration: 0.5s;

}

它是动画迭代计数