Styled components keyframe animation not applying on React component

0
votes

I have the following react component

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

I add my animation moveInLeft which I import from my file:

import { keyframes} from "styled-components"

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

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

`

But for some reason the animation does not apply. Can anyone figure out why?

1
cssreactjsstyled-components

1 Answers

3
votes

I believe you need to remove the @keyframes from your animation as you are already using the styled components keyframe helper.

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

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

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