小编Ale*_*ott的帖子

我有以下反应组件

import React from "react"
import styled from "styled-components"
import { moveInLeft } from '../../styles/Animations'

const StyledHeadingOne = styled.h1`
  font-size: 6rem;
  text-transform: uppercase;
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.5rem;
  animation: ${moveInLeft} 1s ease-in-out .3s both;
`

export default function HeadingOne({ children }) {
  return <StyledHeadingOne>{children}</StyledHeadingOne>
}

moveInLeft我添加从文件导入的动画：

import { keyframes} from "styled-components"

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

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

`

但由于某种原因，动画不适用。谁能弄清楚为什么吗？