CSS animations, slide in on 'block' and out on 'none' - css

Question

I'm building something that is using the css slide animation to have some text slide in when the text display is set to "block", but I was wondering how I would go about doing the reverse (sliding it out) when it is set to "none"? Is it possible to slide in and slide out with CSS animations, or would I have to use Javascript?
Hope that makes sense! Let me know if you have any questions!
JSfiddle of give you a better idea https://jsfiddle.net/qjwqL236/
Thanks!
And code below:
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").style.display = "block";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").style.display = "none";
}
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
display:none;
position: relative;
left: -300px;
animation: slide 0.5sforwards;
-webkit-animation: slide 0.5s forwards;
}
#-webkit-keyframes slide {
100% {
left: 0;
}
}
#keyframes slide {
100% {
left: 0;
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>

Answer 1

In your case. It's easier to use transition than animation. This is how it works.
Everytime the button is click. It changes the value of the left property.
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>
CSS
#text-container{
height: 30px;
width:300px;
color: white;
background-color: blue;
float:left;
position: relative;
left: -400px;
transition: all 0.3s linear
}
#in-button, #out-button{
float:left;
}
JS
var tC = document.getElementById('text-container');
document.getElementById("in-button").onclick = function(){
tC.style.left = '0';
}
document.getElementById("out-button").onclick = function(){
tC.style.left = '-400px';
}
Working fiddle: https://jsfiddle.net/qjwqL236/1/

Answer 2

You should use css translate because it's more performant than positioning and then you need an animation in and an animation out that you can trigger with a class change instead of the display property.
document.getElementById("in-button").onclick = function(){
document.getElementById("text-container").className = "in";
}
document.getElementById("out-button").onclick = function(){
document.getElementById("text-container").className = "out";
}
#text-container{
height: 30px;
width: 300px;
color: white;
background-color: blue;
transform: translateX(-310px);
}
#text-container.in {
animation: in 0.5s both;
-webkit-animation: in 0.5s both;
}
#text-container.out {
animation: out 0.5s both;
-webkit-animation: out 0.5s both;
}
#-webkit-keyframes in {
100% {
transform: translateX(0);
}
}
#keyframes in {
100% {
transform: translateX(0);
}
}
#-webkit-keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#keyframes out {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-310px);
}
}
#in-button{
float:left;
}
#out-button{
float:left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>

Answer 3

Here is what you can do using animations. You need to create a slide-out animation just like you have a slide-in.
Note that it won't slide in/out automatically when you change the display to none or block.
document.getElementById("in-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-in');
}
document.getElementById("out-button").onclick = function() {
document.getElementById("text-container").setAttribute('class', 'slide-out');
}
#text-container {
height: 30px;
width: 300px;
color: white;
background-color: blue;
float: left;
position: relative;
left: -300px;
}
.slide-in {
animation: slide-in 0.5s forwards;
-webkit-animation: slide-in 0.5s forwards;
}
.slide-out {
animation: slide-out 0.5s forwards;
-webkit-animation: slide-out 0.5s forwards;
}
#-webkit-keyframes slide-in {
100% {
left: 0;
}
}
#keyframes slide-in {
100% {
left: 0;
}
}
#-webkit-keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#keyframes slide-out {
0% {
left: 0;
}
100% {
left: -300px;
}
}
#in-button {
float: left;
}
#out-button {
float: left;
}
<button id="in-button">
Make Div slide in
</button>
<button id="out-button">
Make Div slide out?
</button>
<br>
<br>
<div id="text-container">
This is some text in a div.
</div>