链式淡入CSS

我在CSS上制作了一个动画，用于fadeInDown一个元素，以显示一个新元素：

    @keyframes fadeInText {
    from {
      transform: translateY(0px);
      opacity: 0;
    }
    to {
      transform: translateY(30px);
      opacity: 1;
    }
  }

但是我想要一个被锁着的，当第一个消失后，一个新的马上出现。我尝试了一些类似于创建第二个关键帧的方法，该关键帧的值为X和Y，但没有成功

预期结果是这样的。有一个简单的方法可以做到这一点吗

---

本周末，我们用同样的技巧提出了类似的问题

这只是一个向下滑动的动画，它被设置为每个文本元素

诀窍是延迟为每个文本元素启动相同的动画，以便在之前的元素准备好向下滑动运动时开始

要实现这一点的计算并不像需要在

percanteges

中进行转换那样简单，因此您可以将它们设置为

@关键帧

基本解释：

总的
@关键帧
为
100%
（始终）

动画从
0%
（始终）

... 现在是2个关键帧设置的示例：

@keyframes textMover{

   0% {
      ... stylings when animation starts
   }
   50% {
      ... stylings when animation ends
   }

   ... this is the part where the animation pauses
   ... and the second animation is running
   ... so nothing changes here

   100% {
      ... same styling after ending all
      ... as this are same stylings as by 50% this is not needed
      ...  so this entry is just for understanding
   }

}


// now you can call

.text1 {
   animation-name: textMover;
   animation-duration: 10s;
   animation-iteration-count: infinite;
}

.text2 {
   animation-name: textMover;
   animation-duration: 10s;
   animation-iteration-count: infinite;
   
   // here is the trick:
   // animation for element 2 starts delayed 50% of the total animation time 
   // so it start when animation part of first element ended and is 'paused'
   animation-delay: 5s;

}

更复杂的运行演示示例，具有您想要的效果，请参见：