css循环淡入淡出播放（二）

让自己忙一点，忙到没有时间去思考无关紧要的事，很多事就这样悄悄地淡忘了。时间不一定能证明很多东西，但是一定能看透很多东西。坚信自己的选择，不动摇，使劲跑，明天会更好。——静好

之前在docusaurus实现了css的循环淡入淡出播放，发现效果有一点局限，遂还是用js结合css实现了，目前代码为：

import React, {useEffect, useState} from "react";
import clsx from "clsx";
import styles from './index.module.css';
import Layout from "@theme/Layout";

let scopeTitles = [
  'Massive Write',
  'Any Scale Read',
  'Flexible Schema'
]

function HomepageBanner() {
  const [scopeTitleIndex, setScopeTitleIndex] = useState(0);
  const [scopeTitleStyle, setScopeTitleStyle] = useState(styles.fadingTextIn);

  useEffect(() => {
    // text animation
    const interval = setInterval(() => {
      setScopeTitleStyle(styles.fadingTextOut);
      setTimeout(() => {
        setScopeTitleIndex((prevIndex) => (prevIndex + 1) % scopeTitles.length);
        setScopeTitleStyle(styles.fadingTextIn);
      }, 500);
    }, 4000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className={styles.scopeBanner}>
      <div className={styles.scopeBannerContent}>
        <h1 className={styles.scopeBannerText}>
          <div>Manage Data in Petabytes</div>
          <div className={styles.scopeTitle}>
            with{' '}
            <span className={clsx(styles.scopeTitleWith, scopeTitleStyle)}>{scopeTitles[scopeTitleIndex]}</span>
          </div>
        </h1>
        <div className={styles.scopeBtns}>
          <a href="/contact" className={styles.scopeBtn}>Contact Us</a>
          <a href="/blog" className={styles.scopeBtn}>Blog</a>
        </div>
      </div>
      <img src="/brand-kit/homepage-programmer.png" className={styles.scopeBannerImg} alt="Programmer"/>
    </div>
  );
}

function HomepageIntro() {
  return (
    <div className={styles.scopeIntros}>
      <div className={styles.scopeIntro}>
        <div className={styles.scopeIntroTitle}>Date and time data types</div>
        <div className={styles.scopeIntroDesc}>ScopeDB supports data types for managing timestamps.</div>
      </div>
      <div className={styles.scopeIntro}>
        <div className={styles.scopeIntroTitle}>Variant data type</div>
        <div className={styles.scopeIntroDesc}>The variant data type can contain a value of any other data type.</div>
      </div>
      <div className={styles.scopeIntro}>
        <div className={styles.scopeIntroTitle}>Data type conversion</div>
        <div className={styles.scopeIntroDesc}>In many cases, a value of one data type can be converted to another data
          type. For example, an INTEGER
          value can be converted to a floating-point data type value. Converting a data type is called casting.
        </div>
      </div>
    </div>
  );
}

export default function Home(): React.JSX.Element {
  return (
    <Layout
      description="ScopeDB is a database built directly on top of S3 and unleashes the power of cloud elasticity and workload isolation.">
      <HomepageBanner/>
      <HomepageIntro/>
    </Layout>
  );
}

css

/**
 * CSS files with the .module.css suffix will be treated as CSS modules
 * and scoped locally.
 */

.buttons {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fadingTextIn {
    animation: textFadeIn .5s;
}

.fadingTextOut {
    animation: textFadeOut .5s;
}

@keyframes textFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes textFadeOut {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

.scopeBtns {
    display: flex;
    justify-content: left;
    gap: 10px;
    margin-top: 20px;;
}

.scopeBtn {
    padding: 6px 16px;
    border-radius: 12px;
    margin: 5px;
    background: rgb(25 91 255);
    color: #fff;
    font-family: Poppins, sans-serif;
    transition: all .25s;
    cursor: pointer;
}

.scopeBtn:hover {
    color: #fff;
    text-decoration: none;
    box-shadow: 0 10px 20px -10px rgb(25 91 255);
    transform: translateY(-3px);
}

.scopeBanner {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 80px auto;

    .scopeBannerContent {
        padding: 48px 60px;

        .scopeBannerText {
            font-size: 48px;
        }

    }

    .scopeBannerImg {
        width: 600px;
    }

}

.scopeIntros {
    background: rgb(25 91 255);
    color: white;
    width: 100%;
    height: 280px;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding-left: 200px;
    padding-right: 150px;

    .scopeIntro {
        width: 300px;

        .scopeIntroTitle {
            font-size: 20px;
            font-weight: bold;
        }

        .scopeIntroDesc {
            font-size: 14px;
        }
    }
}

效果看起来还不错