CODEWITHSUNDEEP
cssreactjsstyled-components
Boris Grunwald
Boris Grunwald

Reputation: 2732

Styled components keyframe animation not applying on React component

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?

Upvotes: 1

Views: 5999

Answers (1)

AlexGilliott
AlexGilliott

Reputation: 94

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

Upvotes: 5

Related Questions