Different transition for on/off class but same property - html

Question

I have a div that translates itself in with a simple transition:
div{
transform: translate3d(0, -100%, 0);
transition: all .5s;
}
div.active{
transform: translate3d(0, 0, 0);
}
Then, I toggle the class with JS and it works perfectly. This does the following:
On --> Slide div down
Off --> Slide div up
What I want to do is:
On --> Slide div down
Off --> Slide div down again
Is there a way to achieve this?
EDIT: Here's a demo of what it does: https://jsfiddle.net/bwzy89oq/ (click anywhere)

Answer 1

This does what you need, sort of, but it starts off playing the animation. I'm working on how to logic that out:
div {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
transform: translate3d(0, 100%, 0);
background: black;
transition: all .5s ease-in-out;
animation: slider2 .5s forwards;
}
div.active {
animation: slider .5s forwards;
/*transform: translate3d(0, 0, 0);*/
}
#keyframes slider {
from {
transform: translate3d(0, -100%, 0);
}
to {
transform: translate3d(0, 0, 0);
}
}
#keyframes slider2 {
from {
transform: translate3d(0, 0, 0);
}
to {
transform: translate3d(0, 100%, 0);
}
}