样式化组件关键帧动画不适用于React组件

Question

我有以下反应成分

moveInLeft

我添加了从文件中导入的动画import { keyframes} from "styled-components" export const moveInLeft = keyframes` @keyframes moveInLeft { 0% { opacity: 0; transform: translateX(-10rem); } 100% { opacity: 1; transform: translate(0); } } ` ：

getCus

但是由于某些原因，动画不适用。谁能找出原因？

Answer 1

我相信您需要从动画中删除@keyframes，因为您已经在使用样式化组件关键帧帮助器。

const moveInLeft = keyframes`
    0% {
        opacity: 0;
        transform: translateX(-10rem);
    }

    100% {
        opacity: 1;
        transform: translate(0);
    }
`

https://codepen.io/A-G/pen/mdVoxPo