Add the Below code above </head>
<style>
@-webkit-keyframes transform-translate{
from{-webkit-transform:translate(0px,1000px)}
to{-webkit-transform:translate(0px,0px)}
}
@-moz-keyframes transform-translate{
from{-moz-transform:translate(0px,1000px)}
to{-moz-transform:translate(0px,0px)}
}
@-ms-keyframes transform-translate{
from{-ms-transform:translate(0px,1000px)}
to{-ms-transform:translate(0px,0px)}
}
@-o-keyframes transform-translate{
from{-o-transform:translate(0px,1000px)}
to{-o-transform:translate(0px,0px)}
}
@keyframes transform-translate{
from{transform:translate(0px,1000px)}
to{transform:translate(0px,0px)}
}
.sidebar {
-webkit-animation:transform-translate 4s;
-moz-animation:transform-translate 4s;
-ms-animation:transform-translate 4s;
-o-animation:transform-translate 4s;
animation:transform-translate 4s;
}
</style>
Change .sidebar to another elements name in order to add this effect to any other element. Change 4s to any other number if you want to increase or decrease the time it takes to move up completely. By default its 4 seconds.
