Soy nuevo en React, estoy tratando de animar mi fondo en mi sección de inicio, pero aparentemente la animación en el fondo de gradiente lineal no funciona. Cualquier ayuda es apreciada.;)
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 `Lo que he importado:
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';Creo que te falta el tamaño de fondo
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 `Aquí hay un ejemplo de trabajo https://codesandbox.io/s/react-playground-forked-5lcm5v?file=/index.js