为什么我的html元素在动画后会消失

我有一个关于3个html元素的动画,用于我正在处理的登录页。它们按预期工作,然而,我试图一个接一个地淡化每个元素。我也做到了,但当页面加载两个较低的元素(一个h1标签和一个按钮)时,这两个元素都会在动画开始之前短暂出现在页面上,这有点破坏了我试图实现的效果。

所以动画播放出来,第一个元素做它需要做的事情,第二个元素播放动画,但它从页面上消失了。我将在下面提供相关代码。

我在下一个JS项目中使用顺风

HTML

import React from "react";
import { useState, useEffect } from "react";

function Hero() {
  const [animText, setAnimText] = useState("0");

  useEffect(() => {
    const handleText = () =>{
        setAnimText('1')
    };
    addEventListener('load' , handleText)
  }, []);

  return (
    <div className="flex items-center justify-center h-screen w-screen mb-[10rem] bg-center bg-cover bg-no-repeat custom-img">
      {/*OverLay*/}
      <div className="absolute top-0 left-0 right-0 bottom-0 h-screen bg-black/70 z-[2]" />
      <div className="text-white flex flex-col items-center p-5 z-[2] ml[-10rem] mt-[5rem]">
        <h2 className="font-Courgette text-4xl lg:text-5xl py-2 lg:animate-trackingInXpFwdTop">
          Welcome to
        </h2>
        <h1
          style={{ opacity: `${animText}` }}
          className="text-5xl lg:text-7xl font-bold py-5 lg:animate-trackingInXpFwdBtm"
        >
          PATO PALACE
        </h1>
        <button className="border-2 rounded-md px-2 py-2 text-sm font-semibold ">
          View Menu
        </button>
      </div>
    </div>
  );
}

export default Hero;

由于我使用顺风进行造型,以下是动画关键帧的config.js

    keyframes: {
      trackingInXpFwdTop :{
        '0%' : {'letter-spacing' : '0',
                'transform' : 'translateZ(-700px) translateY(-500px)',
                 'opacity' : '0'},
        '40%': {'opacity': '0.6'},
       '100%': {'transform' : 'translateZ(0px) translateY(0px)',
                'opacity' : '1'}
      },
      trackingInXpFwdBtm :{
        '0%' : {'letter-spacing' : '0',
                'transform' : 'translateZ(-700px) translateY(500px)',
                 'opacity' : '0'},
        '40%': {'opacity': '0.6'},
       '100%': {'transform' : 'translateZ(0px) translateY(0px)',
                'opacity' : '1'}
      },
    },
    animation: {
      trackingInXpFwdTop : 'trackingInXpFwdTop linear 1.5s 0s', 
      trackingInXpFwdBtm : 'trackingInXpFwdBtm linear 1.5s 1s' 
    }

我试图通过使用useState和useEffect在开始时将第二个元素(h1标记)的不透明度设置为0,然后在页面加载时将其设置为1(我现在知道这有点多余),期望我的不透明度的结束状态设置为1,从而显示有问题的元素