Html 使用css从顶部获取文本并显示在div中的动画效果

我正在尝试从顶部获取文本，并使用css将其显示在div中。我已经厌倦了使用w3容器类从顶部获取文本。但问题是它一次从顶部显示全部内容。但我需要从顶部逐个获取段落。以下是我使用的代码

<div class="panel panel-default">

       <div class="panel-heading panel-blue-heading">
                 <h3 class="panel-title">Silent Features.</h3>
        </div>

        <div class="panel-body">

           <p class=" w3-container w3-center w3-animate-top">Patient information management.</p>

           <p class=" w3-container w3-center w3-animate-top">Doctor information management.</p>

           <p>User management.</p>

           <p>Pathology.</p>

           <p>Ward management</p>

           <p>Pharmacy</p> 

        </div>
        <div class="panel-footer">
             <button class="btn btn-success">
               <i class="fa fa-thumbs-up" aria-hidden="true"></i>Silent Features.
             </button>
        </div>  
     </div>

      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

无声功能。
患者信息管理

医生信息管理

用户管理

病理学

病房管理

药房

无声功能。

这是我使用的链接

<div class="panel panel-default">

       <div class="panel-heading panel-blue-heading">
                 <h3 class="panel-title">Silent Features.</h3>
        </div>

        <div class="panel-body">

           <p class=" w3-container w3-center w3-animate-top">Patient information management.</p>

           <p class=" w3-container w3-center w3-animate-top">Doctor information management.</p>

           <p>User management.</p>

           <p>Pathology.</p>

           <p>Ward management</p>

           <p>Pharmacy</p> 

        </div>
        <div class="panel-footer">
             <button class="btn btn-success">
               <i class="fa fa-thumbs-up" aria-hidden="true"></i>Silent Features.
             </button>
        </div>  
     </div>

      <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">

---

这里是fiddle链接：

执行此操作的原始模式是在

p

上设置动画，并在每个

p

上设置不同的

动画延迟（等待动画开始的时间）

（我不熟悉w3 animate top，但我猜它或多或少也会做同样的事情）

见下文


p{
转换：translateY（-1000px）；
动画名称：自上而下；
动画填充模式：正向；
动画持续时间：1s；
动画计时功能：放松；
}
@从顶部开始的关键帧{
0%{transform:translateY（-1000px）；}
100%{transform:translateY（0）}
}
p:第一个孩子{
动画延迟：0；
}
第n个孩子（2）{
动画延迟：1s；
}
第n个孩子（3）{
动画延迟：2s；
}
第n个孩子（4）{
动画延迟：3s；
}
第n个孩子（5）{
动画延迟：4s；
}
第n个孩子（6）{
动画延迟：5s；
}

无声功能。
患者信息管理

医生信息管理

用户管理

病理学

病房管理

药房

无声功能。
请将CSS添加到问题中的代码中。希望您至少尝试自己编写此代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果仍然有问题，请返回代码并解释您尝试了什么。