Quiero ejecutar la animación en los últimos diez segundos de un temporizador. Primero, probé con fotogramas clave y fue como quería, pero esta vez, si no actualizo la página, la animación no funcionó. Lo comenté y probé de otra manera que está a continuación:

 useEffect(() => { if (time <= 30 && disabled === false && time !== 0) { setTimeout(() => setTime(time - 1), 1000); } else if (disabled) { setTime(30); setAnimated(null); } else if (time === 0) { setDisabled(!disabled); setInputValue("Time is over"); } if (time <= 10 && animated !== null && disabled === false && time !== 0) { setAnimated("animation 1s infinite"); } }, [time, disabled]);

Componente de cuenta regresiva:

 const CountDown = () => { const { time, animated } = useContext(WordContext); return ( <Time> <Counting style={{ animation: animated !== null ? animated : "" }}> 00:00:{time} </Counting> </Time> ); };

CSS:

 export const Counting = styled.p` margin: auto; font-size: 40px; line-height: 1; animation: ${animation}; // animation-fill-mode: backwards; // animation-delay: 23s; // animation-iteration-count: 10; `;

¿Tienes alguna sugerencia o corrección?. Gracias por adelantado.