css keyframe position issue - html

Question

I want to know how to set the resolution size on key frames, there is a bubble on my website which falls from the top to the bottom. I have set it properly for my screen size but I notice that when screen size changes the bubble go more down and create white space. It is definitely because i set it as top:-500px and top:500px so in every screen size it is taking 500px as fixed height. i want to set top:500px in such a way that whenever size changes it should take the screen height and should stop at bottom.
i tried some code but did not succeed can you please check:
.x4 {
left: 1025px;
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
width:315px;
height:315px;
-webkit-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
-moz-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
-o-animation: moveclouds 15s linear forwards , sideWays 2s ease-in-out infinite alternate;
background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
}
#-webkit-keyframes moveclouds {
0% {
top: -500px;
}
100% {
top: 500px;
}
}

Answer 1

Use your moving element with position:fixed and top property with percents as units instead of pixels (so, start position 0%, end 100%-height of element) . Of course, parent of your element would have to be body for this.
If you would like to have more control over css keyframes, set them to be responsive, dynamically generate and re-generate them, use tool like jQuery.Keyframes

Answer 2

Try below codes and use media query to make that work properly on other screen resolution, you can use vh (viewport height) or % (percentage) to set landing or stopping of that bubble.
.x4 {
-webkit-transform: scale(0.8);
-moz-transform: scale(0.8);
transform: scale(0.8);
opacity: 0.3;
left:calc(100% - 75%);
-webkit-animation: moveclouds 5s linear forwards;
-moz-animation: moveclouds 5s;
-o-animation: moveclouds 5s;
background-image: url(http://dubaiconfident.com/confi-logo/grey1-bubble.png);
background-size:100% 100%;
background-repeat:no-repeat;
position:relative;
width:320px;
height:320px;
}
#-webkit-keyframes moveclouds {
0%{
top: -50vh;
}
100% {
top: 30vh;
}
}
#media screen and (max-width: 480px){
.x4 {
left:calc(100% - 70%);
width:200px;
height:200px;
}
#-webkit-keyframes moveclouds {
0%{
top: -50vh;
}
100% {
top: 30vh;
}
}
}
<div class="x4">
</div>