滚动文本 - 条目同时显示

Question

我正在尝试编写 move/scroll 文本。

所以我终于有了这个。

如您所见，存在问题。在 p 标签内同时显示两个文本的问题。我想显示第一个，然后应该显示第二个。

我正在尝试更改此值

@-moz-keyframes left-one {
 0%   { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes left-one {
 0%   { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes left-one {
   0%   { 
 -moz-transform: translateX(100%); /* Firefox bug fix */
 -webkit-transform: translateX(100%); /* Firefox bug fix */
 transform: translateX(100%);       
 }
 100% { 
 -moz-transform: translateX(-100%); /* Firefox bug fix */
 -webkit-transform: translateX(-100%); /* Firefox bug fix */
 transform: translateX(-100%); 
 }
}

我的意思是 0% 到 50% 但这并不好。

我该如何解决？

Answer 1

你要显示的动画全图是30s长，不是15s。每个单独的动画在屏幕上是15s，但是如果你算上第一个动画的时间+第二个动画的时间，整个动画是30s，所以它们不重叠。

于是将两者的动画时间都改为30s，前15s做第一个动画（0-50%），后15s做第二个动画（50-100%）

.movetext {
  width: 100%;
  height: 50px;
  overflow: hidden;
  position: relative;
  background-color: black;
}

.movetext p {
  position: absolute;
  font-family: Verdana, Arial;
  width: 100%;
  height: 100%;
  margin: 0;
  line-height: 50px;
  text-align: center;
  color: yellow;
  font-weight: bold;
  font-size: 20px;
  transform: translateX(100%);
}

.movetext p:nth-child(1) {
  animation: left-one 30s linear infinite;
}

.movetext p:nth-child(2) {

  animation: left-two 30s linear infinite;
}

@keyframes left-one {
  0% {
    transform: translateX(100%);
  }
  50% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@keyframes left-two {
  50% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

<div class="container">
  
<div class="movetext">
  <p>Something is here.</p>
  <p>But maybe something will be here.</P>
</div>

</div>

Answer 2

谢谢大佬。它工作得很好。 :)

我看到移动端视图有点问题。所有文本显示不正确。它只是被切断了。对于其他分辨率 (>768) 一切都很好。

那么这个怎么样。我该如何处理？

编辑

我看到了问题。 P标签设置宽度为class。我知道我可以设置 witdh 例如。 700px 但我想 p 标签设置 width of width text.

滚动文本 - 条目同时显示

Scrolling text - intems are display in the same time

html

css

text

scroll

move