CSS 3动画(文字从上到下)

Question

我尝试在CSS中使用"animation"one_answers"keyframes"来制作类似于marquee的动画。

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

请帮助。

@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%。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>