SOURCE

Zepto(function($) {
    $('.up').addClass('animation');
    $('.down').addClass('animation');
  })

<div class="up"></div>
<div class="down"></div>

* {
  padding: 0;
  margin: 0;
  border: none;
}

body {
  background: url(https://drscdn.500px.org/photo/115449731/m%3D2048/de36ebde35ec474d7d543171a2f6f02d);
}

.up,
.down {
  position: absolute;
  left: 0;
  right: 0;
  background: #607D8B;
}

.up {
  top: 0;
  bottom: 100%;
}

.down {
  top: 100%;
  bottom: 0;
}

.up.animation {
  animation: up 2s 1 normal;
}

.down.animation {
  animation: down 2s 1 normal;
}

@keyframes up {
  from {
    bottom: 50%;
  }
  to {
    bottom: 100%;
  }
}

@keyframes down {
  from {
    top: 50%;
  }
  to {
    top: 100%;
  }
}