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';
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