Question

我正在尝试使用＆＃34;动画＆＃34;制作类似于选框的动画。和＃34;关键帧＆＃34;在CSS中。

我试图将文字从底部移到底部。但是，当文本从顶部移动一次时，它只在整个文本到达底部后才开始从顶部开始移动。我希望这种情况持续下去。

请帮忙。

代码

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

如果您需要为其创建marquee效果。

以-ve位置开始动画，并停止95%处的最后一个顶部位置，并将某个位置值延伸至100%，将其添加到+ ve 0%关键帧值。
将div包装在容器内，让容器的height等于95％的最高值。 overflow: hidden会产生一种效果，就像它从容器中滑出一样。
在这种情况下，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>

CSS 3动画（文字从上到下）

1 个答案: