title: Hide png image until its displayed within users screen
body: <p>At the moment I have a css animation that starts off screen (as below) and travels to the right. (see here <a href="http://crea8tion.com/ChristmasMessage/index.html" rel="nofollow">http://crea8tion.com/ChristmasMessage/index.html</a>)</p>
  
  <p>I've noticed during testing that on some screens it's still showing on the left of the screen before the animation starts.</p>
  
  <p>Is there something additional I can do that hides the png based on the user's screen size?</p>
  
  <p>Here is what I have at the moment, you can see it's simply offset to the left.</p>
  
  <pre><code>.santa {
      width: 1000px;
      position: absolute;
      top: -14%;
      left: -75%;
      -webkit-animation: santa-move 1s 1s ease-out forwards;
      -webkit-animation-delay:5s;animation-delay:5s;                   
      -webkit-animation-duration: 25s;
  
      -moz-animation: santa-move 1s 1s ease-out forwards;
      -moz-animation-delay:5s;animation-delay:5s;                   
      -moz-animation-duration: 25s;
  }
  </code></pre>