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

【问题标题】：I have two text and I want them to appear on each other in css我有两个文本，我希望它们在 css 中相互显示
【发布时间】：2021-05-12 10:12:56
【问题描述】：

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

 @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; }
}

this is my first text and I want my second text to appear when first one dissappears

【问题讨论】：

标签： html css sass frontend web-frontend

【解决方案1】：

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

.parent{
  position: relative;
}
p{
  position: absolute;
  top: 0;
  left: 0;
}
#first{
  animation: t1 linear 3s infinite;
}
#second{
  animation: t2 linear 3s infinite;
}
@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; }
}

<div class="parent">
  <p id="first">Hello</p>
  <p id="second">Bonjour</p>
</div>

【讨论】：