Entonces, cuando se crea una animación a través de la declaración de formato largo y tiene varios nombres especificados:
const animationNameCss = css` //insert keyframes here ` let animatedImg = styled.img` animation-name: ${animationNameCss}, ${animationNameCss}; animation-delay: 0, 200ms; animation-duration: 200ms; animation-timing-function: linear; animation-iteration-count: 1; `;Solo se realiza la primera animación. ¿Está esto relacionado con la concatenación de plantillas etiquetadas o simplemente no es compatible con los componentes con estilo? La intención es crear varias animaciones que se reproduzcan una tras otra durante 200 ms cada una concatenando el nombre de la animación y el retraso de la animación.
AnimationNameCss se establece dinámicamente en uno de los 8 conjuntos de fotogramas clave diferentes en el código real.
En realidad estoy equivocado, funciona así. El problema estaba en realidad en el retraso de la animación: 0, 200 ms;
Eso debería ser 0ms, 200ms y la animación funciona como se esperaba.