body,html{
    width: 100%;
    height: 100%;
  
}
.box{
  width:40%; 
  height:40%; 
  margin:30px auto; 
}
.tbox{
  width:100%; 
  height:100%; 
  border: 1px solid blue;
}
@-webkit-keyframes dowm {
      from {
        position: relative;
        top: 0;
      }

      to {
       position: relative;
       top: 50px;
      }
}
@-webkit-keyframes up {
  from {
    position: relative;
    top: 0;
  }

  to {
   position: relative;
   top: -50px;
  }
}
.dowm{
-webkit-animation: dowm 1s linear;
animation: dowm 1s linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.up{
-webkit-animation: up 1s linear;
animation: up 1s linear;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}