CSS animation On ReactJS Project Unable to make it work-CodePudding

Im new to React, Im trying to make my background animated on my home section but apparently the animation on the linear-gradient background does not work. Any help is appreciated.;)

const gradient = keyframes` //ANIMATION
0% {
  background-position: 0% 50%;
}
50% {
  background-position: 100% 50%;
}
100% {
  background-position: 0% 50%;
}
`

const Section = styled.section ` 
// min-height: ${props => `calc(100vh ${props.theme.navHeight})` };
width: 100vw;
position: relative;
// background-color: ${props => props.theme.body};
animation: gradient 15s ease infinite;
background: linear-gradient(-45deg, #000, #211725, #2f0a3d, #6f1e8e); //LINEAR
animation: ${gradient} 15s ease infinite; //ANIMATION
`

What I have imported :

import React from 'react'
import TypeWriterText from '../TypeWriterText'
import styled, { keyframes } from 'styled-components'
import CoverVideo from '../CoverVideo'
import RoundTextBlack from '../../assets/Rounded-Text-White.png';

CodePudding user response：

I think you are missing background-size

    const Section = styled.section ` 
      // min-height: ${props => `calc(100vh ${props.theme.navHeight})` };
      width: 100vw;
      height: 100vh
      position: relative;
      // background-color: ${props => props.theme.body};
      // this line might be for nothing  animation: gradient 15s ease infinite;
      background: linear-gradient(-45deg, #000, #211725, #2f0a3d, #6f1e8e);   //LINEAR   
      background-size: 500% 500%;

      animation: ${gradient} 15s ease infinite; //ANIMATION
    `

Here is a working example https://codesandbox.io/s/react-playground-forked-5lcm5v?file=/index.js