Div not animating as intended

I've run into a problem where one of my react components isn't acting how I'd like it to. In the following code, the components are buttons that once clicked will cause the div className "box" to show on the screen and the components to disappear. And then once the is clicked, the will reappear and the div className "box" to once again disappear. For some reason, whenever I click the button, the animation for my isn't working. I want it to slowly fade in, rather than paste itself instantly on the screen.

Is my CSS or my Js wrong? Unsure.

App.js:

<section>
  <div style={{'--color': box.color, '--left': box.left, '--top': box.top}} className={box.active ? 'box active' : 'box'}>
    {box.active ? <FaButton box={box} setBox={setBox} /> : ''}
    {box.color === 'orange' ? <MyStory /> : ''}
    {box.color === 'red' ? <MyGoals /> : ''}
    {box.color === 'turquoise' ? <MyProjects /> : ''}
  </div>
  <HeroPicture box={box} />
  <Pulse box={box} setBox={setBox} number={1} data={data.ORANGE}/>
  <Pulse box={box} setBox={setBox} number={2} data={data.TURQUOISE}/>
  <Pulse box={box} setBox={setBox} number={3} data={data.RED}/>
  <TextBlock text={!box.active ? 'My Story': ''} top={'190px'} color={'orange'} box={box}/>
  <TextBlock text={!box.active ? 'My Projects' : ''} top={'390px'} color={'turquoise'} box={box}/>
  <TextBlock text={!box.active ? 'My Goals' : ''} top={'590px'} color={'red'} box={box}/>
  <LongSentence />
  <LongSentence style={{color: 'red', left: '-1500px', top: '2300px'}}/>
  <LongSentence style={{left: '300px', top: '-1300px'}}/>
  <LongSentence style={{color: 'red', left: '320px'}}/>
  <TinyBlock />

</section>

TextBlock.js:

import React from 'react'
import './TextBlock.css'

const TextBlock = ({text, top, color, box}) => {
  return (
    <div className={box.active ? 'textBlock' : 'textBlock disable'} style={{top: top}}>
      <h1 style={{color: color}}>{text}</h1>
    </div>
  )
}

export default TextBlock

TextBlock.css:

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@700&family=Poppins:wght@400;500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Montserrat:wght@700&family=Poppins:wght@400;500&family=Teko:wght@700&display=swap');

@font-face {
    font-family: 'Cyberpunk Regular';
    src: url('./../../../Assets/Cyberpunk/Cyberpunk-Regular.ttf') format('truetype');
}

h1 {
    font-family: 'Cyberpunk Regular';
    text-transform: uppercase;
    font-size: 3em;
    color: white; 
    text-shadow: 5px 5px black;
}

.textBlock {
    position: inherit;
    left: 450px;
    animation: intro 5s;
    animation-delay: 0s; 
}

.textBlock p {
    color: white;
}

.textBlock.disable {
    animation: outro 10s;
    pointer-events: none;
}

@keyframes intro {
    0% {
        opacity: 0;
    } 100% {
        opacity: 1;
    }
}
@keyframes outro {
    0% {
        opacity: 1;
    } 100% {
        opacity: 0;
    }
}