动画未按指示运行

Question

window.sr = ScrollReveal();
		sr.reveal('.b1', {
			duration: 2000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.b2', {
			duration: 1500,
			origin: 'top',
			distance: '80px'
		})
		sr.reveal('.b3', {
			duration: 1000,
			origin: 'top',
			distance: '80px'
		});
		sr.reveal('.w1', {
			duration: 3000,
			origin: 'right',
			distance: '200px'
		});
		sr.reveal('.w2', {
			duration: 3500,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.w3', {
			duration: 4000,
			origin: 'right',
			distance: '150px'
		});
		sr.reveal('.h2-about', {
			duration: 2000,
			origin: 'top',
			distance: '150px'
		});


		const navBtn = document.querySelector('.menu-bars');
		navBtn.addEventListener('click', () => {
			const b1 = document.querySelector('.b1');
			const b2 = document.querySelector('.b2');
			const b3 = document.querySelector('.b3');

			addAnimation(b1);
			addAnimation(b2);
			addAnimation(b3);

			function addAnimation(bar) {
				bar.style.animationName = bar.className + '-animate';
			}
		});

		const aboutDiv = document.querySelector('.about-us');
		aboutDiv.addEventListener('mouseover', () => {
			const line = document.querySelector('.underline');
			line.style.animationName = 'line';
		})

html, body {
	margin: 0;
	padding: 0;
}

.side-menu {
	position: fixed;
	top: 140px;
	background-color: white;
	width: 299.5px;
	padding: 10px;
	transition: all 2s ease;
	left: -500px;
	opacity: 0.8;
}

.side-menu ul {
	list-style-type: none;
	text-align: center;
}

.side-menu li {
	color: grey;
	font-size: 1.8rem;
	margin: 6px;
	margin-left: -35px;
	margin-bottom: 35px;
	font-family: 'Ubuntu';
}

.side-menu li:hover {
	color: orange;
	cursor: pointer;
}

.menu-bars{
	position: fixed;
	left: 50px;
	top: 80px;
	z-index: 11;
}

.b1, .b2, .b3 {
	position: relative;
	width: 60px;
	height: 7px;
	background-color: red;
	margin:.55rem;
	left: 0px;
	top: 0px;
	border-radius: 9px;
}

.b1 {
	background-color: lightgreen;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

.b2 {
	background-color: white;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

.b3 {
	background-color: #ff4d4d;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

/*@keyframes*/ .b1-animate {
	/*from {}
	to {*/
		width: 60px; height: 8px; position: relative; left: -50px; top: 41px; width: 100px; border-radius: 0; background-color: lightgreen;
}

/*@keyframes*/ .b2-animate {
	/*from {}
	to {*/width: 60px;
	height: 8px;
	position: relative;
	left: 35px; 
	top: 33px; 
	width: 150px; 
	height: 8px; 
	border-radius: 0;
	background-color: white;
}

/*@keyframes*/ .b3-animate {
	/*from {}
	to {*/width: 60px;
	height: 8px;
	position: relative;
	top: 25px;
	right: -169px; 
	width: 100px; 
	border-radius: 0;
	background-color: #ff4d4d;
}

.intro {
	background-image: url("img/mex-9.jpg");
	width: 100vw;
	height: 100vh;
	background-attachment: fixed;
	background-size: cover;
	margin-bottom: 0;
}

h1 {
	font-family: 'Cedarville Cursive';
	position: absolute;
	left: 700px;
	top: 50px;
	color: white;
	font-size: 3rem;
}

h2 {
	text-align: center;
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	padding: 30px;
	color: white;
}

.about-us {
	margin-top: -40px;
	padding-bottom: 90px;
	background-color: #339966;
	width: 100vw;
}

.underline {
	margin: 0;
	position: absolute;
	left: 570px;
	bottom: -120px;
	background-color: orange;
	width: 0px;
	height: 3px;
	animation-duration: 0.7s;
	animation-fill-mode: forwards;
	transition-timing-function: ease-out;
}

@keyframes line {
	from {left: 370px; width: 0px;}
	to {left: 570px; width: 210px; border-radius: 1.5px;}
}

p {
	position: relative;
	padding-left: 20px;
	top: -30px;
	color : white;
	font-size: 1.8rem;
	word-spacing: 7px;
	width: 400px;
	font-family: 'Josefin sans';
	margin-left: 130px;
}
.fa-caret-down {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: white;
	left: 665px;
	bottom: 300px;
	transform: rotate(90deg);
}

.image-slider {
	background-color: darkgrey;
	position: relative;
	width: 440px;
	height: 350px;
	right: -710px;
	bottom: 500px;
}


.right {
	position: relative;
	width: 50px;
	height: 50px;
	font-size: 60px;
	color: white;
	left: 1145px;
	bottom: 715px;
	transform: rotate(-90deg);
	transition: all 0.5s ease;
}

.side-msg {
	font-family: 'Cedarville Cursive';
	font-size: 3rem;
	color:#e6ac00;
	position: relative;
	right: -700px;
	font-weight: bold;
	top: -560px;
}

.chile {
	width: 460px;
	height: 345px;
	position: relative;
	top: -500px;
	z-index: 11;
}

.menu-wrapper {
	width: 100VW;
	background-color: #e6ac00;
	height: 905px;
	position: relative;
	top: -720px;
	clip-path: polygon(0% 0%, 100% 15%, 100% 100%, 0% 100%);
}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>El Metate | Mexican food</title>
	<link href="https://fonts.googleapis.com/css?family=Cedarville+Cursive" rel="stylesheet">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
	<link href="https://fonts.googleapis.com/css?family=Josefin+Sans" rel="stylesheet">
	<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
	<link rel="stylesheet" href="style.css">
	<script src="https://unpkg.com/scrollreveal"></script>
</head>
<body>
	<header>
		<nav>
			<div class="side-menu">
				<ul>
					<li>Home</li>
					<li>About</li>
					<li>Menu</li>
					<li>Contact</li>
					<li>Location</li>
					<li>News</li>
				</ul>
			</div>
			<div class="menu-bars">
				<div class="b1-animate"></div>
				<div class="b2-animate"></div>
				<div class="b3-animate"></div>
			</div>
		</nav>
		<div class="intro">
			<h1><span class="w1">Authentic</span><span class="w2">Mexican</span><span class="w3">Food</span></h1>
		    <img src="" alt="">
		</div>
	</header>

	<section class="about">
		<div class="about-us">
			<h2 class="h2-about">About Us</h2>
			<div class="underline"></div>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat est ab adipisci illo consectetur obcaecati, incidunt, nesciunt ad vitae possimus nam inventore esse impedit. Ullam soluta architecto eligendi sapiente recusandae labore necessitatibus quis similique laboriosam quas, nam explicabo numquam commodi magni mollitia itaque hic quaerat earum, nemo optio maiores in.</p>
			<i class="fas fa-caret-down"></i>
			<div class="image-slider">p</div>
			<i class="fas fa-caret-down right"></i>
			<p class="side-msg">Bueno Comida</p>
		</div>	
	</section>
	
	<section class="menu">
		<div class="menu-wrapper"></div>
	</section>

	<script src="script.js"></script>
</body>
</html>

嘿，我正在为我的汉堡包样式导航按钮制作click动画。您在代码中看到的是动画完成后按钮的外观。一条小的墨西哥种族分界线。如果您查看css，则会在针对红色/绿色/白色条的每个选择器上注意到，我注释了一些代码。那么，您可以看到的这些类是@keyframe动画。这些选择器中的样式位于from {}属性中。

签出这支密码笔，看看它应该是什么样的动画效果 https://codepen.io/spabsa/pen/mKZWQa

您会注意到，当您单击导航按钮时，它将触发一个事件，并将这些动画添加到每个栏中，将其变形为一条漂亮的直线。除了那当然不是什么事情，每行都是愚蠢的？有什么想法吗？