0
280
VistasLa animación de fotogramas clave CSS deja Halo en WebKit
Esto ocurre principalmente en Safari móvil, pero también se puede reproducir en el escritorio:
Después de un tiempo de ejecutarse en segundo plano en una pestaña o aplicación diferente, volver a esta animación cargada da como resultado halos cuadrados que resaltan los personajes en movimiento individuales. Una actualización soluciona esto, pero ¿cómo puedo hacer que deje de suceder en primer lugar? Consulte el archivo adjunto para ver el problema y el código completo a continuación.
Cualquier ayuda sería increíblemente apreciada. ♡
<html lang="en" > <head> <meta charset="UTF-8"> <title>Test</title> <style> html{ height:100%; width:100%; background:#FFF; } body { height:100%; width:100%; display:flex; flex-direction: column; align-items:center; justify-content:center; gap:1rem; overflow:hidden; } .animated-text { font: 12.0vmin/1 "Helvetica"; letter-spacing: 0.3rem; } .animated-text span.letter{ display:inline-block; } .animated-text.tilted span.letter{ animation: 1s tilted forwards ease-in-out infinite; } @keyframes tilted { 0%{ transform: rotateZ(-15deg); } 50%{ transform: rotateZ(15deg); } 100%{ transform: rotateZ(-15deg); } } </style> </head> <body> <!-- partial:index.partial.html --> <span class="animated-text tilted"> STACK </span> <span class="animated-text tilted"> OVERFLOW </span> <!-- partial --> <script>var animatedText = document.querySelectorAll(".animated-text"); function animate(element){ var textArray = element.innerText.split(""); element.firstChild.remove(); var elArray = textArray.map( (letter,index)=>{ if(letter==" ") letter = ' '; var el = document.createElement("span"); el.className = "letter"; el.innerHTML = letter; el.style.animationDelay = index/(textArray.length)+"s"; element.appendChild(el); return el; } ); element.innerHtml = elArray; } Array.from(animatedText).map(animate)</script> </body> </html>
·
Juan Pablo Isaza
Responde la pregunta