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

Question

我有以下反应组件

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);
    }
}

`

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

Answer 1

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

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

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

https://codepen.io/AG/pen/mdVoxPo