Die Animation wird einer gestalteten Komponente nicht dynamisch zugewiesen

Question

Ich kann einer gestalteten Komponente keine CSS-Animation dynamisch zuweisen. Ich habe es unten reproduziert.

Ich habe anfangs versucht, die CSS-Animation wie folgt zu definieren:

. . .
import styled, { keyframes } from 'styled-components'
. . .

export default function App() {
    . . . .
}


const slideAnimation = keyframes`
    0% {
        transform: translateX(0px);
    }
    100% {
        translateX(-400px);
    }
`;

Dies warf jedoch einen Fehler auf , weshalb ich die Animation jetzt mit dem cssHelfer umhülle.

Sie sind sich nicht sicher, was ich falsch mache. Ist das Zuweisen von Animationen auf diese Weise unmöglich styled-components?

Answer 1

Aus dem Dokument https://styled-components.com/docs/api#keyframes

Erstellen Sie eine Animation mit keyframeund fügen Sie sie in ein CSS mit eincss

https://codesandbox.io/s/intelligent-khorana-5usys