Html 我有两个文本，我希望它们在css中相互显示

我有两个文本，我希望它们彼此显示。我制作了一个动画，让它们在不同的时间出现。 动画代码

 @keyframes t1 {
   0% {opacity: 1;}
   30%{ opacity: 1;}
   40%{opacity: 0;}
   90%{ opacity: 0;}
   100% {opacity: 1; }
}
 
@keyframes t2 {
   0% {opacity: 0;   }
   40%{opacity: 0;}
   50%{opacity: 1;}
   80%{opacity: 1;}
   90%{opacity: 0;}
   100% {opacity: 0; }
}

---

对两个元素使用绝对位置，并将其相对于父元素放置。

.parent{
位置：相对位置；
}
p{
位置：绝对位置；
排名：0；
左：0；
}
#首先{
动画：t1线性3s无限；
}
#第二{
动画：t2线性3s无限；
}
@关键帧t1{
0%{不透明度：1；}
30%{不透明度：1；}
40%{不透明度：0；}
90%{不透明度：0；}
100%{不透明度：1；}
}
@关键帧t2{
0%{不透明度：0；}
40%{不透明度：0；}
50%{不透明度：1；}
80%{不透明度：1；}
90%{不透明度：0；}
100%{不透明度：0；}
}

您好
你好