CSS Animations skip in Firefox when animated element is out of viewport

Question

Try using this JSFiddle in Chrome and in Firefox. Here's the code:

(HTML)

<div class="slide-down">
  <h1>Hello!</h1>
</div>

(CSS)

.slide-down {
  font-size: 3em;
  -moz-animation-duration: 3s;
  -webkit-animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  -moz-animation-fill-mode: both;
  -moz-animation-name: slideDown;
  -webkit-animation-name: slideDown;
}
@-moz-keyframes slideDown {
  0% {
    -moz-transform:translateY(-300px);
  }
  100% {
    -moz-transform:translateY(0px);
  }
}

@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-300px);
  }
  100% {
    -webkit-transform: translateY(0px);
  }
}

My issue is that it works in Chrome but only works in Firefox when the starting coordinates (at the "0%" point of the animation) of the animated div are within the viewport. Otherwise, it can completely skip the animation. Try changing the translateY() parameter to something more conservative, like -50px, and it will work. Is there a workaround for this? It would be nice to be able to bring something in from outside the screen without having to write a script to figure out what its initial y-coordinate should be.

Answer 1

I would consider animating the margin instead:

 .slide-down { font-size: 3em; animation:slideDown 3s forwards; } @keyframes slideDown { 0% { margin-top:-300px; } 100% { margin-top:0; } } 

 <div class="slide-down"> <h1>Hello!</h1> </div>