Как сделать входную и выходную анимаци?

Question

[Grep1]

Я написал анимацию(@keyframes), присвоил ее определенному классу. По клику я удаляю этот класс, как сделать так что бы было, что-то вроде обратной анимации(выходной). Условно я делаю меню. По клику на кнопку присваивается класс active - меню с анимацией появляется, когда жму второй раз - меню скрывается т.к убирается active, но как сделать анимацию выхода?

Comments

[Pavstyuk]

Было бы полезно взглянуть на код для ясности. HTML, CSS, JS...

Answer 1

[MeMoJlor]

Вот так:

.menu
   {background-color: rgb(247, 247, 247);
   position: fixed;
   opacity: 1;
   display: none;
   top: 0; right: 0;
   width: 100%;
   height: 120vh;
   z-index: 100;
   animation: menus 0.5s;
   animation-fill-mode: forwards;}
   @keyframes menus
   {70%{opacity: 0; right: 0;}
   99%{right: 0;}
   100%{opacity: 0; display: none; right: -105%;}}
.menu_active
   {opacity: 0;
   animation: menus2 0.5s;
   animation-fill-mode: forwards;}
   @keyframes menus2
   {0%{display: none; opacity: 0;}
   10%{display: block; opacity: 0;}
   100%{opacity: 1; display: block;}}