<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.