title: css keyframe position issue
body: <p>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:</p>
  
  <pre><code>.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;
      }
  } 
  </code></pre>