I have one boolean variable to control the fade in effect for two components. however, if I use the same keyframe name for animation it does not work. I have to create duplicated keyframe context for two fade in effect. anyone know why or how can I clean up my css file? codesandbox.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;
  }
}