Javascript css3动画链接的工作原理很奇怪

我制作了一些包含文本动画的网站

为了实现它，我使用带有关键帧的CSS3动画

我还使用承诺链接结果动画

首先，看看下面我使用的源代码

const intro1=document.getElementsByClassName（'intro1'）[0]；
const intro2=document.getElementsByClassName（'intro2'）[0]；
const intro3=document.getElementsByClassName（'intro3'）[0]；
const intro4=document.getElementsByClassName（'intro4'）[0]；
const sleep=ms=>newpromise（res=>setTimeout（res，ms））；
异步函数简介（）{
//简介1
等待睡眠（2500）；
等待介绍1.classList.remove（'fade-in'）；
等待介绍1.classList.add（'fade-out'）；
//导言2
简介2.classList.add（'fade-in'）；
等待睡眠（2000年）；
等待介绍2.classList.add（'fade-out'）；
等待介绍2.classList.remove（'fade-in'）；
//导言3
简介3.classList.add（'fade-in'）；
等待睡眠（2500）；
等待介绍3.classList.add（'fade-out'）；
等待介绍3.classList.remove（'fade-in'）；
//导言4
简介4.classList.add（'fade-in'）；
等待睡眠（2500）；
等待介绍4.classList.add（'fade-out'）；
等待介绍4.classList.remove（'fade-in'）；
}
简介（）
正文{
保证金：0；
填充：0；
}
部分{
显示器：flex；
证明内容：中心；
对齐项目：居中；
背景色：aliceblue；
宽度：100%；
身高：100%；
字号：2rem；
字号：100；
}
跨度{
文本对齐：居中；
位置：绝对位置；
}
.intro2、.intro3、.intro4{
显示：无；
}
.intro2、.intro3、.intro4{
文本对齐：居中；
}
/*介绍动画*/
.淡入{
显示：内联块；
溢出：隐藏；
空白：nowrap；
动画：fadeIn 4s向前；
}
.淡出{
动画：淡出1s向前；
}
@关键帧淡入淡出{
从{
宽度：0；
}
到{
宽度：100%；
}
}
@关键帧淡出{
到{
不透明度：0；
}
}

测试测试
导言2

导言3

导言4标题

简介5主题ABCDEFghI

在简介2简介3和简介4中，由于它们被设置为
显示：无
如果它有淡入淡出类，它将有
显示：内联块
。随着类淡出，它将再次显示：none

。所以动画会发生，但你看不到

对此的修复方法是将

display:inline block

添加到类淡出中，然后删除该类

修正：

---

编辑：我还添加了

文本对齐：居中和
位置：绝对到类淡入。
这是因为，当您删除
淡入时，您的元素变为
显示：无
，因此
不透明度
是不相关的。工作正常。谢谢