CSS 3 动画（从上到下的文本）

Question

我正在尝试使用 CSS 中的“动画”和“关键帧”制作类似于选取框的动画。

我试图将文本从底部移动。但是，当文本从顶部移动一次时，只有在整个文本到达底部时，它才会再次从顶部移动。我想让这个连续。

请帮忙。

代码

@keyframes movingTopToBottom {
  0% {
    top: 50px;
  }
  100% {
    top: 90px;
  }
}
#divTAReviews {
  animation: movingTopToBottom 3s ease infinite;
  -webkit-animation: movingTopToBottom ease 3s infinite;
  position: absolute;
}

<div id="container">
  <div id="divTAReviews">
    <div>
      <p class="styling" style="background-color:lightblue;"></p>
    </div>
    <div>
      <p class="styling" style="background-color:lightgreen;opacity:0.3"></p>
    </div>
    <div>
      <p class="styling" style="background-color:palevioletred;opacity:0.3">.</p>
    </div>
    <div>
      <p class="styling" style="background-color:orchid;opacity:0.2"></p>
    </div>
  </div>
</div>

Answer 1

如果你需要为它创建marquee效果。

1. 从-ve 位置开始动画，在95% 停止最后一个顶部位置，并在100% 处扩展一些位置值，添加到+ve 0% 关键帧值。
2. 将div包裹在一个容器中，让容器的height等于95%的top值。 overflow: hidden 会给它一种效果，就好像它从容器中滑开一样。
3. 在这种情况下，animation-timing-function: linear 会给它一个 更好的效果，因为它在整个过程中保持相同的时序电平曲线 动画。

@keyframes movingTopToBottom {
  0% {
    top: -15px;
  }
  95% {
    top: 150px;
  }
  100% {
    top: 165px;
  }
}
.container {
  height: 150px;
  overflow: hidden;
}
#divTAReviews {
  animation: movingTopToBottom 5s linear infinite;
  position: relative;
  background: lightblue;
  display: inline-block;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div id="divTAReviews">Review Text1</div>
</div>