Recientemente usé styled-components npm para usar en mi aplicación Remix. Las animaciones funcionan bien, pero después de la tercera actualización se detiene. También lo he implementado en Netlify , pero la animación simplemente no comienza allí. este es el codigo que uso
import skills from '../js/skills.jsx'; import styled, { keyframes } from 'styled-components'; export default function Test(){ skills.forEach((skill: any, index) => { const moveLeftFirst = keyframes` 0% { left: 110%; } 100% { left: -10%; }`; const IconDiv = styled.div` animation: ${moveLeftFirst} 8s infinite linear; animation-delay: ${index * 0.8}s; `; iconDivs.push(IconDiv); }); {iconDivs.map((IconDiv, index) => ( <IconDiv id="skillIcon" data-tip data-for={skills[index].title} className="skillIcon mx-3 justify-center absolute hover:text-white ease-in transition duration-300 left-[110%]" onMouseOver={() => stopAnimation(true)} onMouseOut={() => stopAnimation(false)}> {createElement(skills[index].icon.type, { className: 'w-20 h-20' })} </IconDiv> ))} }Si necesita más información, estaré encantado de dársela, ya que no puedo explicarlo exactamente en un hilo.
Nunca debe definir componentes con estilo dentro de otro componente, siempre defínalos en el nivel superior, lo mismo cuando defina animaciones, consulte https://styled-components.com/docs/faqs#why-should-i-avoid-declaring-styled- componentes-en-el-método-de-render . Por lo tanto, puede mover moveLeftFirst en el nivel superior y mover IconDiv en el nivel superior también, convirtiendo index en un prop $index transitorio.