css循环淡入淡出播放

 import React from "react";
 import clsx from "clsx";
 import styles from './index.module.css';
 import Layout from "@theme/Layout";

 function HomepageHeader() {
  return (
    <header className={clsx('hero', styles.heroBanner)}>
      <div className={clsx(styles.heroContainer)}>
        <img className={clsx(styles.heroBannerImg)} src="/brand-kit/homepage-programmer.webp"
             alt="Programmer"/>
        <div className={clsx(styles.heroTitleBanner)}>
         <h1 className="hero__title">
            <div>Manage Data in Petabytes</div>
            <div className={clsx(styles.heroTitleRounds)}>
              with{' '}
              <span className={clsx(styles.heroTitleRound)}>Massive Write</span>
              <span className={clsx(styles.heroTitleRound)}>Any Scale Read</span>
              <span className={clsx(styles.heroTitleRound)}>Flexible Schema</span>
            </div>
          </h1>
          <div className={clsx(styles.heroBtns)}>
           <a href="/contact" className={clsx(styles.heroBtn)}>Contact Us</a>
            <a href="/blog" className={clsx(styles.heroBtn)}>Blog</a>
          </div>
        </div>
      </div>
    </header>
  );
}

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.">
      <HomepageHeader/>
      <main/>
    </Layout>
  );
}

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

.heroBanner {
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

@media screen and (max-width: 996px) {
    .heroBanner {
        padding: 2rem;
    }
}

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

.heroContainer {
    display: flex;
}

.heroBannerImg {
    height: 700px;
}

.heroTitleBanner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.heroTitleRounds {
    display: flex;
    width: 200px;
    overflow: visible;
}

.heroTitleRound {
    opacity: 0;
    animation: fadeInOut 9s infinite;
    white-space: nowrap;
    color: #3071a9;
}

.heroTitleRound:nth-child(1) {
    animation-delay: 0s;
}

.heroTitleRound:nth-child(2) {
    animation-delay: 3s;
}

.heroTitleRound:nth-child(3) {
    animation-delay: 6s;
}

@keyframes fadeInOut {
    0%, 33.33% {
        opacity: 1;
    }
    33.33%, 100% {
        opacity: 0;
        display: none;
    }
}

.heroBtns {
    display: flex;
    justify-content: center;
    gap: 10%;
    margin-top: 20px;;
    scale: 1.1;
}

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

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