How to make a modal window with animation of closing and opening?

Good afternoon.
In General, I wanted to make a modal window not just for example here is something like this with a small animation when a(in the example it is not but I hope you understand what I mean)
And with the animation of the disappearance. Since there is already the toggle does not help.
So should appear a window(well, OK it's just when you click add
animation: test 1s linear;
@keyframes test {
 0% {
 transform: translateX(100%)


Here's how to disappear(moving up and disappearing.

The second step, the disappearance of modelki well does not work, tried transition and display: none;

Can anyone give examples or explain what sequence of actions I need to perform to achieve this effect it?
I would like to use pure Js, without using jQuery
March 20th 20 at 11:46
2 answers
March 20th 20 at 11:48
@olen_Brek well, that is the point in your response, if you then remove the foam?? - nellie41 commented on March 20th 20 at 11:51
March 20th 20 at 11:50
the sequence is as follows: on close button to add module class "closes", which spelled out the animations of the County upwards, and in the handler for animationend to remove the class "closed" and add the class "closed" or even to carry modelco from home
I'll try your option, thanks, never heard of animationed - Lucius.Donnelly94 commented on March 20th 20 at 11:53

Find more questions by tags CSSJavaScript