Как сделать анимацтю тсчезновения?

Question

[cracker-test]

Есть блок и кнопка. По щелчку на кнопку появляется блок и к нему добавляется анимация плавного появления. Как сделать так, чтобы при нажатии на кнопку блок так же плавно исчезал и анимация была такая же, но только в обраном порядке?

@keyframes animation-visible-element {
  0% {
    transform: translateX(-150%);
  }
  100% {
    transform: translateY(0);
  }

Comments

[MrColdCoffee]

можно же дефолтное значение у блока сделать transform: translateX(-150%); и transition: .5s; например

а при клике добавлять\удалять класс, где будет уже transform: translateX(0%);

Answer 1

[Елисей Карамышев]

animation-direction: reverse
Присвойте класс с таким свойством и должно сработать