Animation issue on Firefox Quantum

I noticed an issue with animations on the new Firefox Quantum.

When you first load a page with some animated elements display: none;, when a script switches it to .display = "block"; you will miss the entire animation, or some parts of it at the beginning if it is longer than a few seconds.

View it in the snippet below:

var anims = document.getElementsByClassName("anim"),
    time = document.getElementById("time"),
    interval = null;

function animate() {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "block";
}

function timer(sec) {
  time.textContent = sec--;
  interval = setInterval(function () {
    time.textContent = sec >= 0 ? sec-- : clearInterval(interval) || "";
  }, 1000);
}

// Directly after click
button0.addEventListener("click", animate);

// One seconds after click
button1.addEventListener("click", function () {
  timer(1);
  setTimeout(animate, 1000);
});

// Two seconds after click
button2.addEventListener("click", function () {
  timer(2);
  setTimeout(animate, 2000);
});

// Three seconds after click
button3.addEventListener("click", function () {
  timer(3);
  setTimeout(animate, 3000);
});

// Hide the divs
reset.addEventListener("click", function () {
  for (var i = 0; i < anims.length; i++)
    anims[i].style.display = "none";
});

body {
  font-family: arial;
}

body > div {
  margin-bottom: 10px;
}

#result {
  background-color: #e5f3ff;
  height: 120px;
  padding: 10px;
}

.anim {
  display: none;
  float: left;
  margin: 10px;
  width: 50px;
  height: 50px;
  border-radius: 5px;
  animation: animate 1.5s;
}

#anim1 {
  background-image: linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);
  
  /* Only one iteration iteration (default) */
  /* This one will not be animated */
}

#anim2 {
  background-color: #fddb92;
  animation-iteration-count: 3; 
  
  /* Three iterations */
  /* Only one iteration will be seen */
}

#anim3 {
  background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
  animation-iteration-count: infinite; 
  
  /* Infinite */
  /* No visible problem */
}

@keyframes animate {
  50% {
    transform: translate(80%, 100%) rotate(-360deg);
  }
}

<div>
  <span><strong>Reload the snippet</strong>
  before clicking another button for viewing the issue
  <br/><strong>Or,</strong>
  <em>Reset</em> (display: "none") before clicking a button to view with no issue: </span>
</div>

<div>
  <button id="button0">On click</button>
  <button id="button1">1 sec timeout</button>
  <button id="button2">2 sec timeout</button>
  <button id="button3">3 sec timeout</button>
  <button id="reset">Reset</button>
  <span id="time"></span>
</div>

<div id="result">
  <div id="anim1" class="anim"></div>
  <div id="anim2" class="anim"></div>
  <div id="anim3" class="anim"></div>
</div>

You will notice that the infinite animation doesn't apparently have any problem, but the two others do obviously have.

What is the solution then?

Note:

You have to use Firefox Quantum in order to view this.
I have tried the same snippet on Google Chrome and everything is working good.

Solution

Tested it, pretty sure it is solved for all browsers by using classes. There are more ways to handle it but putting the animation inside a new class that only gets added after the button click does the trick.

In the CSS I've moved the animation property to a new class, and the new class also add the block style.

.anim-start {
  display: block;
  animation: animate 1.5s;
}

In the JS I only changed style.display='block' to anims[i].classList.add('anim-start');

See: https://jsfiddle.net/0mgqd2ko/1/

Using this method of a new class makes it easier. For example, what if you want to transition from opacity 0 to 1? It's hard to do that when starting from display none. And what if you just want to use visibility so the elements still take space?