I'm trying to make a div repeatedly appear instantly and slowly fade-out, at arbitrary intervals.

JS used to make the div appear:

div.classList.remove('fade-out');
div.offsetWidth;
div.classList.add('fade-out');

With this CSS:

.fade-out {
    animation: fadeOut 2.5s ease-out;
}

@keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

div { opacity: 0; }

For some reason, this works as expected in desktop Chrome, Safari & Firefox, but on iOS around half of the time the animation isn't played — the div just disappears after 2.5 seconds with no progressive opacity change. This happens both on both iPhone and iPad, with both Firefox and Safari.

Stuff tried since the initial post:

• Add animation: none to the element's original definition.
• Set the animation property through JS instead.
• Use 100% and 0% instead of to and from.
• Setting the div's initial opacity to 1 instead of 0 and add animation-fill-mode: forward.
• Add a short delay with setTimeOut.
• Use full animation definition instead of shorthand notation.
• Additional definition using -webkit-animation and @-webkit-keyframes.

Using any of the above doesn't have an effect on the animation, which still works as expected everyhere except on iOS.

(Not a real) solution

The only way I could make iOS display the animation consistently was by adding a short delay to the animation:

animation: fadeOut 2.5s ease-out 0.01s

However, since the div's "instant display then fade-out" animation can be triggered while an old animation is still running on it, the delay adds a noticeable one-frame flash which is undesirable (regardless of how low I set the delay value).

Any ideas?