title: Using CSS translateY()
body: <p>I am moving some element from (browser height + element height)px towards the top of the browser at -50px of the browser using CSS keyframes and that works but the problem is it's lagging and I am well aware that using translateY would resolve this issue.</p>
  
  <p>Now assume I have a CSS as follows.</p>
  
  <pre><code>.bubble
  {
      -webkit-transition: -webkit-transform 1s ease-in-out;
  }
  
  .bubble.move
  {
      -webkit-transform: translateY(-50px);
  }
  </code></pre>
  
  <p>As the element is below the browser screen (browser height + element height)px and I want it to move at the top of the screen at -50px, that doesn't work. It just moves the element from its current position to the -50px of that current position which is not intended. How can I ask transitions to go at -50px of the browser and not he element?</p>