Делаю анимированный менюбар. Анимацию на открытие сделал, а на закрытие обратную анимацию не получается сделать. Подскажите, как это делается?
var collapse = document.getElementById('collapse-menu');
collapse.addEventListener('click', function(e) {
this.classList.toggle('l-header__bar_close');
});
@keyframes barToClose_one {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 9px);
}
100% {
transform: translate(0, 9px) rotate(45deg);
}
}
@keyframes barToClose_two {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, 0);
}
100% {
transform: translate(0, 0) rotate(-45deg);
}
}
@keyframes barToClose_three {
0% {
transform: translate(0, 0);
}
50% {
transform: translate(0, -9px);
}
100% {
transform: translate(0, -9px) rotate(-45deg);
}
}
.l-header {
height: 45px;
background-color: #10151c;
}
.l-header__bar {
width: 50px;
height: 100%;
padding: 6px 10px;
box-sizing: border-box;
}
.l-header__icon-bar {
background-color: #fff;
height: 3px;
margin-top: 6px;
border-radius: 2px;
}
/* Animate bar to close */
.l-header__bar_close .l-header__icon-bar:nth-child(1) {
animation: barToClose_one 500ms cubic-bezier(0, .61, 1, .55) forwards;
}
.l-header__bar_close .l-header__icon-bar:nth-child(2) {
animation: barToClose_two 500ms cubic-bezier(0, .61, 1, .55) forwards;
}
.l-header__bar_close .l-header__icon-bar:nth-child(3) {
animation: barToClose_three 500ms cubic-bezier(0, .61, 1, .55) forwards;
}
<div class="l-header">
<div class="l-header__bar" id="collapse-menu">
<div class="l-header__icon-bar"></div>
<div class="l-header__icon-bar"></div>
<div class="l-header__icon-bar"></div>
</div>
</div>