Есть div с классом .button. При нажатии на этот div срабатывает обраотчик событий в js и к класу .button прибавляется класс .showed у которого есть анимация:
JS:
button.classList.add('showed');
CSS:
.button.showed{
animation: anim1 .8s ease-out;
animation-delay: .6s;
animation-fill-mode: forwards;
}
При повторном клике к этим двум классам прибавляется .reverse:
CSS:
.button.showed.reverse{
animation-direction: reverse;
animation-delay: unset;
animation-fill-mode: unset;
}
@keyframes anim1{
0{
transform: translateX(0);
opacity: 0;
visibility: hidden;
}
100%{
transform: translateX(195px);
opacity: 1;
visibility: visible;
}
}
Проблема в том, чо при присваивании .reverse состояние элемента transform срабатывает, но без видимой анимации, т.е. срабатывает мгновенно.