Html 如何在CSS中制作多步骤的简单动画？

我想在屏幕中央使用CSS实现以下动画：

文字“你好”逐渐消失

文字“你好”逐渐消失

小圆圈出现并变为较大的矩形

我执行了第三步，如下所示：

.step3{
高度：250px；
宽度：250px；
保证金：0自动；
背景颜色：蓝色；
动画名称：拉伸；
动画持续时间：10秒；
动画计时功能：放松；
动画延迟：0；
动画方向：交替；
动画迭代次数：1；
动画填充模式：无；
动画播放状态：运行；
}
@关键帧拉伸{
0% {
变换：缩放（.3）；
边界半径：100%；
}
100% {
转换：比例（1.5）；
}
}

---

您需要阅读这里的两个属性 1.动画延迟 2.动画填充模式

动画延迟会导致动画在一段时间后启动，所以基本上可以在第一个动画结束后启动第二个动画

动画填充模式您可以在此处阅读

div{
位置：绝对位置；
}
身体{
宽度：100vw；
高度：100vh；
显示器：flex；
对齐项目：居中；
证明内容：中心；
}
.文本{
字号：3em；
/*动画：showfade 4s线性2s两个*/
动画名称：showfade；
动画持续时间：4s；
动画延迟：.4s；
动画填充模式：两者都有；
}
.直肠{
背景色：#07f；
宽度：200px；
高度：200px；
/*动画：矩形2s线性6s二者*/
动画名称：rect；
动画持续时间：2秒；
动画延迟：4.4s；
动画填充模式：两者都有；
}
@关键帧显示淡入淡出{
0%, 100% {
不透明度：0；
}
50% {
不透明度：100；
}
}
@关键帧矩形{
从{
变换：比例（0）；
边界半径：100%；
}
}

你好

---

如果我理解正确，您可以这样做：

正文{
显示器：flex；
证明内容：中心；
对齐项目：居中；
保证金：0；
高度：100vh；
}
.步骤3{
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：250px；
宽度：250px；
边界半径：50%；
动画：伸展10秒，向前放松3秒；
}
.step3>跨度{
不透明度：0；
动画：FadeInOut3s；
}
@关键帧拉伸{
0%，100%{变换：比例（.3）；背景：蓝色}
100% {
转换：比例（1.5）；
边界半径：0；
}
}
@关键帧淡入淡出{
50%{不透明度：1}
100%{不透明度：0}
}

---

您好

您所说的“按顺序淡出此文本”是什么意思？一个简单的解决方案是在

拉伸

动画上使用

动画延迟

：谢谢。

动画名称：showfade的含义是什么？它只是动画的一个名称。就像您的案例一样，它的
拉伸