Estoy tratando de hacer que un div aparezca repetidamente al instante y desaparezca lentamente, a intervalos arbitrarios.

JS solía hacer aparecer el div :

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

Con este CSS:

 .fade-out { animation: fadeOut 2.5s ease-out; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } div { opacity: 0; }

Por alguna razón, esto funciona como se esperaba en Chrome, Safari y Firefox de escritorio, pero en iOS, aproximadamente la mitad del tiempo, la animación no se reproduce: el div simplemente desaparece después de 2,5 segundos sin cambios progresivos de opacidad. Esto sucede tanto en iPhone como en iPad, tanto con Firefox como con Safari.

Cosas probadas desde la publicación inicial:

• Agregue animation: none a la definición original del elemento.
• Establezca la propiedad de animation a través de JS en su lugar.
• Utilice 100% y 0% en lugar de to y from .
• Establecer la opacidad inicial de div en 1 en lugar de 0 y agregar animation-fill-mode: forward .
• Agrega un breve retraso con setTimeOut .
• Utilice la definición de animación completa en lugar de la notación abreviada.
• Definición adicional usando -webkit-animation y @-webkit-keyframes .

El uso de cualquiera de los anteriores no tiene un efecto en la animación, que aún funciona como se esperaba en todas partes excepto en iOS.

(No es una solución real)

La única forma en que podía hacer que iOS mostrara la animación consistentemente era agregando un breve retraso a la animación:

animation: fadeOut 2.5s ease-out 0.01s

Sin embargo, dado que la animación de "visualización instantánea y luego desvanecimiento" del div se puede activar mientras una animación antigua aún se está ejecutando en él, el retraso agrega un destello de un cuadro notable que no es deseable (independientemente de qué tan bajo establezca el retraso valor).

¿Algunas ideas?