如何为每个<p>元素

Question

我正在尝试从下到上滚动，我使用了translateY属性，但是它同时滚动了div，我想将它应用到每个p元素分开，以便每个元素可以单独查看 下面是我的代码

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100px;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(-100%);
  }
}

<div id="announcements">
  <div class="panel-body">
    <div class="wrapper">
      <p> this is annoumcment #1</p>


      <p> this is annoumcment #2</p>


      <p> this is annoumcment #3</p>


      <p> this is annoumcment #4</p>
    </div>

  </div>
</div>

Answer 1

只需移除绝对位置并根据需要调整变形：

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 300px;
}

.wrapper p {

  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 2s linear infinite alternate;
}

@keyframes marquee {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(calc(-4 * 100%)); 
  }
}

＆＃13;

<div id="announcements">
  <div class="panel-body">
    <div class="wrapper">
      <p> this is annoumcment #1</p>


      <p> this is annoumcment #2</p>


      <p> this is annoumcment #3</p>


      <p> this is annoumcment #4</p>
    </div>

  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

不是动画<p>元素，而是将它们包装在新的div中。然后设置此div

的动画

请参阅下面的代码段：

＆＃13;

＆＃13;

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 200px;

}

.wrapper p {
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
}

.wrapper .animated {
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translateY(100%); }
  100% { transform: translateY(-100%); }
}

＆＃13;

<div id="announcements"> 
                          <div class="panel-body" >
                              <div class="wrapper">
                                  <div class="animated">
                                  <p> this is annoumcment #1</p>
                              
                           
                                  <p> this is annoumcment #2</p>
                              
                            
                                  <p> this is annoumcment #3</p>
                             
                            
                                  <p> this is annoumcment #4</p>
                                  </div>
                           </div>
                         
                         </div>
                     </div>

＆＃13;

＆＃13;

＆＃13;