Tengo esta animación simple activada cuando hago la transición de display: none a display: block. Funciona perfectamente en Chrome, pero en Safari se activa solo la primera vez, cuando escondo el elemento y luego lo vuelvo a mostrar por segunda vez, no funciona.
.child1 { display: none; } .child2 { display: block; } .visibility .child1 { display: block; } .visibility .child2 { display: none; } @keyframes myAnimation { 0% { transform: scale(0.5); } } .animated { animation: myAnimation 0.4s ease-out; } <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="testdiv" class="visibility"> <div class="child1">Hello</div> <div class="child2 animated">Bye</div> </div> <script> const elem = document.getElementById("testdiv"); elem.addEventListener("click", () => { if (!elem.classList.length) { elem.classList.add("visibility"); } else { elem.classList.remove("visibility") } }) </script> </body> </html>Aquí está el truco: dale a la animación un retraso muy pequeño, digamos 0.0001s y listo.
.animated { animation: myAnimation 0.4s ease-out 0.0001s; } Como está utilizando animación CSS con display , una propiedad no animable, diferentes navegadores tratarán esto de diferentes maneras y de alguna manera impredecible.
La razón por la que funciona cuando ponemos un pequeño retraso es que antes de que el texto se deslice de derecha a izquierda, el texto no debería aparecer en la pantalla, por lo tanto, display: none . Sin embargo, como dije, display no se puede animar, por lo que el texto aparecería de inmediato y no se vería ninguna transición, lo que hacemos es darle un tiempo para que desaparezca.
De todos modos, esto sigue siendo un truco, cuando cambia a otra pestaña en Safari y luego regresa, la animación no se ejecutará. Es mejor no usar la display para la animación.