Html @在三个DIV'；让我们在开始时显示它的内容

我有一个这样的动画作品。我只是想解决一个问题，即假设3个div的所有内容都是交替的，在开始时显示在其他内容之上。9秒后，它会正常工作

我在这里尝试了许多类似问题的解决方案和属性，但都没有成功

代码如下：

.maintext div{
宽度：100%；
位置：绝对位置；
排名：0；
}
.maintexth1{
字体大小：35px；
文本对齐：居中；
}
.maintexth3{
字号：18px；
文本对齐：居中；
字母间距：2px；
线高：35px；
}
@关键帧txt3FadeInOut{
0%{不透明度：1；}
17%{不透明度：1；}
33%{不透明度：0；}
82%{不透明度：0；}
100%{不透明度：1；}
}
.maintext div:n类型（1）{
动画：txt3FadeInOut 9秒轻松进退6秒无限；
}
.maintext div:n类型（2）{
动画：txt3FadeInOut 9轻松输入输出3s无限；
}
.maintext div:n类型（3）{
动画：txt3FadeInOut 9s易入易出无限；
}

第一个文本


第一个文本
第二文本


第二文本
第三文本


第三文本

您可以尝试构建三种不同的动画，例如：

@keyframes txt1FadeInOut {
  0% { opacity: 1; }
  16% { opacity: 1; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt2FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 1; }
  48% { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt3FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 1; }
  100% { opacity: 1; }
}

---

然后以相同的时间运行它们

您可以尝试构建三种不同的动画，例如：

@keyframes txt1FadeInOut {
  0% { opacity: 1; }
  16% { opacity: 1; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt2FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 1; }
  48% { opacity: 1; }
  64% { opacity: 0; }
  100% { opacity: 0; }
}

@keyframes txt3FadeInOut {
  0% { opacity: 0; }
  16% { opacity: 0; }
  32% { opacity: 0; }
  48% { opacity: 0; }
  64% { opacity: 1; }
  100% { opacity: 1; }
}

---

然后以相同的时间运行它们

因为动画持续9秒，所以可以从延迟中减去9秒，并保持延迟相同-但要在动画已经运行的情况下启动动画

因此，6秒的延迟变成6-9=-3秒的延迟

此外，您还可以共享公共属性，使代码更加枯燥

.maintext div{
宽度：100%；
位置：绝对位置；
排名：0；
}
.maintexth1{
字体大小：35px；
文本对齐：居中；
}
.maintexth3{
字号：18px；
文本对齐：居中；
字母间距：2px；
线高：35px；
}
@关键帧txt3FadeInOut{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
33% {
不透明度：0；
}
82% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.maintext分区{
动画：txt3FadeInOut 9轻松输入输出无限；
}
.maintext div:n类型（1）{
动画延迟：-3s；
}
.maintext div:n类型（2）{
动画延迟：-6s；
}

第一个文本


第一个文本
第二文本


第二文本
第三文本


第三文本

由于动画持续9秒，因此可以从延迟中减去9秒，并保持延迟相同-但要在动画已经运行的情况下启动动画

因此，6秒的延迟变成6-9=-3秒的延迟

此外，您还可以共享公共属性，使代码更加枯燥

.maintext div{
宽度：100%；
位置：绝对位置；
排名：0；
}
.maintexth1{
字体大小：35px；
文本对齐：居中；
}
.maintexth3{
字号：18px；
文本对齐：居中；
字母间距：2px；
线高：35px；
}
@关键帧txt3FadeInOut{
0% {
不透明度：1；
}
17% {
不透明度：1；
}
33% {
不透明度：0；
}
82% {
不透明度：0；
}
100% {
不透明度：1；
}
}
.maintext分区{
动画：txt3FadeInOut 9轻松输入输出无限；
}
.maintext div:n类型（1）{
动画延迟：-3s；
}
.maintext div:n类型（2）{
动画延迟：-6s；
}

第一个文本


第一个文本
第二文本


第二文本
第三文本


第三文本

我尝试了您的解决方案，它肯定会让它变得更好。但从3到1的循环过渡并不平滑。无论如何谢谢你！您可以冲洗并重复相同的逻辑，以便在后续步骤中再添加一个步骤。但另一个答案是更好的，我尝试了你的解决方案，它肯定会使它更好。但从3到1的循环过渡并不平滑。无论如何谢谢你！您可以冲洗并重复相同的逻辑，以便在后续步骤中再添加一个步骤。但另一个答案更好。非常感谢您的解决方案和建议！我已经围绕这个问题工作了两天！很高兴它帮了你这么多，谢谢你的解决方案和建议！我已经围绕这个问题工作了两天！很高兴这有帮助