Tengo una variable booleana para controlar el efecto de atenuación de dos componentes. sin embargo, si uso el mismo nombre de keyframe para la animación, no funciona. Tengo que crear un contexto de fotograma clave duplicado para dos efectos de fundido. ¿Alguien sabe por qué o cómo puedo limpiar mi archivo css? codigosandbox.io

 // App.tsx import "./styles.css"; import { useState } from "react"; import classNames from "classnames"; export const HalfPage = () => { return ( <h1>I am half page context</h1> ); }; export const FullPage = () => { return ( <h1>I am FULL page context</h1> ); }; export default function App() { const [cnt, setCnt] = useState(0); const isFullPage = cnt % 2 === 0; const appClass = classNames({ fullPage: isFullPage, halfPage: !isFullPage }); const handleOnClick = () => { setCnt(cnt + 1); }; return ( <div className="App"> <button onClick={handleOnClick}>Change background</button> <div className={appClass}>{isFullPage ? <FullPage /> : <HalfPage />}</div> </div> ); } // css .fullPage { background-color: aquamarine; animation: fullFadeIn 2s linear; /* animation: fadeIn 2s linear; it does not work*/ width: 490px; } .halfPage { background-color: bisque; animation: halfFadeIn 2s linear; /*it does not work*/ /* animation: fadeIn 2s linear; it does not work*/ width: 290px; } @keyframes halfFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fullFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }