Move an div in out screen by css - html

Question

I want to an object move out and in screen(slide in left to right and slide out right to left).
I use this CSS:
#-webkit-keyframes slideInSmooth {
0% {
-webkit-transform: translate3d(-100%,0,0);
}
100% {
-webkit-transform: translate3d(0,0,0);
}
}
#-webkit-keyframes slideOutSmooth {
0% {
-webkit-transform: translate3d(0,0,0);
}
100% {
-webkit-transform: translate3d(-100%,0,0);
}
}
.tabs {
-webkit-animation: slideInSmooth ease-in 250ms;
animation: slideInSmooth ease-in 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
}
.tabs-item-hide > .tabs{
-webkit-animation: slideOutSmooth ease-in 250ms;
animation: slideOutSmooth ease-in 250ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 250ms;
animation-duration: 250ms;
}
My Html look like this:
<div id="div1" class="">
<div class="tabs">
</div>
</div>
class tabs-item-hide will be add in div1 by an event and after that item
hide.
class tabs-item-hide will be remove in div1 by an event if want to show
item
The code work fine when object show, it slide from left to right perfect.
But when object hide it does nothing!
Please help me correct my css to have object move from right to left out of screen.
Thanks!

Answer 1

I hope I understood you correctly, but I guess that should work for you.
.tabs-item-hide {
width:100%;
overflow:hidden;
position:relative;
height:50px;
}
#-webkit-keyframes slideInSmooth {
0% { left:0; }
90% { left:100%; }
90.0001% { left:-50px; }
100% { left:0; }
}
#keyframes slideInSmooth {
0% { left:0; }
90% { left:100%; }
90.0001% { left:-50px; }
100% { left:0; }
}
.tabs {
-webkit-animation: slideInSmooth 2.5s forwards;
animation: slideInSmooth 2.5s forwards;
position:absolute;
width:50px;
height:50px;
background:#ffa500;
}
<div class="tabs-item-hide">
<div class="tabs"></div>
</div>