CSS3 Content Drop effect

<! DOCTYPE html>

<meta charset= "UTF-8" >

<title></title>

<style type= "Text/css" >

. box{

Float:left;

width:155px;

height:212px;

Background-color:blue;

position:relative;

margin-left:45%;

margin-top:100px;

Overflow:hidden;

}

. content{

Position:absolute;

Top: -212px;

width:155px;

height:212px;

Transition:1s;

Text-align:center;

Color:white;

background-color:red;

}

@keyframes tobottom{

from{

top:-212px;

}

to{

top:0px;

}

}

@keyframes tobottom2{

from{

top:0px;

}

to{

top:212px;

}

}

</style>

<body>

<div class= "box" >

<div class= "Content" >

<p> of course not really dropped, just the top value of the child element has changed, beyond the scope of the large box is hidden. </p>

</div>

</div>

</body>

<script type= "Text/javascript" >

var boxs=document.getelementsbyclassname ("box")

for (Var i=0;i<boxs.length;i++) {

Boxs[i].onmouseover=function () {

var X=this.children;

x[0].style.animation= "tobottom 1s forwards";//forwards stop at the end of the animation screen

}

Boxs[i].onmouseleave=function () {

var X=this.children;

x[0].style.animation= "tobottom2 1s";

}

}

</script>

CSS3 Content Drop effect