我有一个简单的汉堡包图标，我想通过纯 javascript 点击时触发 CSS 动画（请不要使用 jquery）。我通过在汉堡包图标上添加和删除一个类来做到这一点，当我添加该类时，CSS 动画正在发生，但是当我删除该类时，动画没有发生，汉堡包线突然返回而没有动画。基本上我希望动画反转并回到原始位置。
这是代码：
var hamburgerMenu = document.querySelector('.hamburger-menu');
hamburgerMenu.addEventListener('click', function() {
var hamburgerMenuSpan2 = document.querySelector('.hamburger-second');
hamburgerMenuSpan2.classList.toggle('hamburger-line-2');
});.hamburger-menu {
position: absolute;
top: 20px;
right: 20px;
}
.hamburger-line-2 {
animation-name: animate;
animation-duration: 3s;
animation-timing-function: ease-in-out;
animation-fill-mode: forwards;
animation-direction: alternate;
}
@keyframes animate {
0% {
width: 40px;
}
100% {
width: 0px;
}
}
.hamburger-menu span {
display: block;
width: 40px;
height: 2px;
background: black;
margin: 10px 0px;
}<div class="hamburger-menu">
<span class="hamburger-line-1"></span>
<span class="hamburger-second"></span>
<span class="hamburger-line-3"></span> …