Помогите пожалуйста. При движении div меняет размер страницы и всё портит. Как это решить ?

<style>
.frame {
z-index: 200;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;


background: -moz-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(19%, rgba(0, 0, 0, 0)), color-stop(100%, rgba(0, 0, 0, 0.9))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 19%, rgba(0, 0, 0, 0.9) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#00000000', endColorstr = '#e6000000', GradientType = 1); /* IE6-9 fallback on horizontal gradient */

}

.frame div {position: absolute;left: 0;top: -20%;width: 100%;height: 20%;background-color: rgba(0, 0, 0, .12);box-shadow: 0 0 10px rgba(0, 0, 0, .3);animation: asd 12s linear infinite;}
.frame div:nth-child(1) {animation-delay: 0;}
.frame div:nth-child(2) {animation-delay: 4s;}
.frame div:nth-child(3) {animation-delay: 8s;}
@keyframes asd {0% {top: -20%;}100% {top: 100%;}}
</style>

<div class="frame">
<div></div>
<div></div>
</div>