Estoy creando una ventana emergente de inicio de sesión en un sitio web. Me acabo de dar cuenta de que al abrir la ventana emergente con Safari varias veces (abrirla y cerrarla), la animación solo se mostrará cuando se abra el modal por primera vez después de cargar una página. En Chrome todo funciona perfectamente bien y la animación se muestra cada vez. Simplifiqué el problema en este codepen, donde el problema también es evidente. https://codepen.io/bvonr/pen/BaZVxxK ¿Cuál es el motivo de este comportamiento? ¿Cómo puedo solucionar este problema para que la animación se muestre todo el tiempo no solo en Chrome sino también en Safari? Supongo que el problema está dentro de estas líneas de mi CSS.
.animate { animation: zoom 0.6s } @keyframes zoom { from {transform: scale(0)} to {transform: scale(1)} }Una solución común para "las cosas que suceden antes de que se cargue mi página" es escuchar el evento de carga de la página y luego hacer cosas:
window.addEventListener('load', () => { const myAnimationElement = document.querySelector("#my-animation-element") myAnimationElement.classList.add("animate"); });Este evento solo se activará cuando se haya cargado toda la página y todos los recursos dependientes. evento de carga
con respecto a su CSS, parece estar bien y si esto no lo resuelve, puede intentar eliminar la clase de su elemento y la animación antes de que la página se descargue escuchando el evento correcto y luego eliminando la clase cuando se activa, pero esto parece muy raro que tengas que hacer eso. descargar evento
También revisaría esta página web: https://caniuse.com/?search=animations
Espero que esto ayude y lo siento si no es así.