<button onclick="showorhide()">toggle</button>
<div id="box"></div>
#box{
  width:100px;
  height:100px;
  background:yellowgreen;
  visibility:hidden;
  opacity:0;
  transform:translateY(100px);
  transition:.3s;
}
#box.show{
  animation:show .5s forwards;
}
#box.hide{
  visibility:visible;
  opacity: 1;
  transform: translateY(0);
  animation:hide .5s forwards;
}
@keyframes show{
  to {
    visibility:visible;
    opacity: 1;
    transform: translateY(0)
  }
}
@keyframes hide{
  to {
    visibility:hidden;
    opacity: 0;
    transform: translateY(100px)
  }
}
function showorhide(){
  if(!this.bool){
    document.getElementById('box').className='show';
  }else{
    document.getElementById('box').className='hide';
  }
  this.bool = !this.bool;
  
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.