如何為CSS動畫設置合適的類，使它們在每次生成報價時都能顯示？如果css動畫不是問題，那是什么？

import React, { useState, useEffect, useContext } from 'react';
    import styles from './QuoteDisplay.module.css';
    import { EmberModeContext } from '../styles/EmberMode';
    import { baseQuotes, emberQuotes } from './Quotes';

const QuoteDisplay = () => {
  const { isEmberMode } = useContext(EmberModeContext);
  const [quote, setQuote] = useState({
    quote: '',
    author: '',
    reference: '',
    enumeration: '',
  });
  const [animate, setAnimate] = useState(false);

  useEffect(() => {
    const addEnumeration = (quotes) => {
      return quotes.map((quote, index) => ({
        ...quote,
        enumeration: (index + 1).toString(),
      }));
    };

    const getRandomQuote = () => {
      let quotes;
      if (isEmberMode) {
        quotes = [...baseQuotes, ...addEnumeration(emberQuotes)];
      } else {
        quotes = baseQuotes;
      }

      const randomIndex = Math.floor(Math.random() * quotes.length);
      return quotes[randomIndex];
    };

    const interval = setInterval(() => {
      setAnimate(true); // Trigger the animation by toggling the animate state

      setTimeout(() => {
        setQuote((prevQuote) => ({
          ...getRandomQuote(),
        }));
      }, 500); // Adjust the delay as per your preference

      setTimeout(() => {
        setAnimate(false); // Reset the animate state after the animation
      }, 1000); // Adjust the delay as per your preference
    }, 4000);

    setQuote(getRandomQuote());

    return () => {
      clearInterval(interval);
    };
  }, [isEmberMode]);

  return (
    <div className={`quote-container ${isEmberMode ? styles.emberMode : ''}`}>
      {quote.enumeration && quote.reference === 'Dokkodo' && (
        <p className={styles.enumeration}>
          {quote.enumeration}.&nbsp;
        </p>
      )}
      <p
        id="quote"
        className={`${styles.quote} ${animate ? styles.fadeIn : ''}`}
      >
        {quote.reference === 'Dokkodo' && (
          <span className={styles.enumeration}>
            {quote.enumeration}.&nbsp;
          </span>
        )}
        "{quote.quote}"
      </p>
      {quote.author && (
        <p className={styles.author}>
          - {quote.author}
          {quote.reference && (
            <span className={styles.reference}>
              ({quote.reference})
            </span>
          )}
        </p>
      )}
    </div>
  );
};

export default QuoteDisplay;

CSS文件:

.quote-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
  }
  
  .quote-wrapper {
    max-width: 600px; /* Adjust the width as per your preference */
  }
  
  .quote {
    font-family: 'Arial', sans-serif;
    font-size: 24px;
    color: #fff;
    text-align: center;
    background-color: #000;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: color 0.3s ease-in-out;
    animation: fadeIn 0.5s ease-in-out forwards;
  }
  
  .samurai-quote {
    font-family: 'JapaneseFont', sans-serif;
    font-size: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .hindu-quote {
    font-family: 'HindiFont', sans-serif;
    font-size: 28px;
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  
  .emberMode .quote {
    color: #c55d17;
    text-shadow: 0 0 12px #d54b00;
  }
  
  .quote {
    color: #bb73df;
    text-shadow: 0 0 12px #8800cb;
  }
  
  .emberMode .author,
  .author {
    color: #fff;
    text-shadow: 0 0 5px #ffa500;
  }
  
  .emberMode .reference {
    color: #fff;
    text-shadow: 0 0 5px #ffa500;
  }
  
  @keyframes fadeIn {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }
  
  @keyframes fadeOut {
    from {
      opacity: 1;
    }
    to {
      opacity: 0;
    }
  }

我想產生顯示報價的愉快體驗，以一種允許用戶閱讀報價的方式，體驗頭腦中的思想實現的時刻，然后自發地將其更改為另一個報價。這個生成器將在2，3個不同的上下文中運行，顯示各種各樣的引用(不是一些激勵性的演講)，更像是更有信息的東西，顯示感興趣的領域。