title: CSS Keyframe animation along with screen height
body: <p>I am trying to animate an object in second page from one position to another using the below code.</p>
  
  <pre><code>#myimg2{
  
      position: absolute;
      -webkit-animation: myfirst2 3s none; /* Chrome, Safari, Opera */
      -webkit-animation-direction: top; /* Chrome, Safari, Opera */
      animation: myfirst2 3s none;
      }
      @-webkit-keyframes myfirst2 {
      0%   { left: 10%; top: 1325px;}
      100% { left: 10%; top: 1285px;}
  }
  </code></pre>
  
  <p>Here, I have hardcoded top and it is working perfectly fine. 
  I can extract the height of the screen using</p>
  
  <pre><code>var hgt = $('#img1').height();
  </code></pre>
  
  <p>Can anyone suggest how i can set this var+40 as top for 100 percent animation and var for 0 percent animation rather than hardcoding with 1325 and 1285 respectively</p>