html - 如何让文字滚动然后正常显示

Question

尝试使此 div 中的文本一直滚动以向用户显示任何溢出。

<div class="container">
   <p>Please dont feed the gold fish, they will turn into gremlins</p>
</div>

以上是可能溢出容器的免责声明示例。免责声明可以更改，可以更长或更短。有没有一种方法可以有条件地为 p 标签设置动画以滚动标签的内容(如果它对于容器来说太大)，然后在动画完成并出现省略号溢出后返回到正常显示位置？

这是我目前所做工作的代码笔。

http://codepen.io/anon/pen/EZEzXr

Answer 1

我已将动画设置为完全指定 transform 和 right 来移动它。我已经简化了特定于供应商的样式，现在不需要它们

希望这就是你想要的

.container {
  width: 200px;
  overflow: hidden;
}
.container p {
  position: relative;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  animation: scroll-left 6s linear 1;
}
@keyframes scroll-left {
  0% {
    overflow: visible;
    right: 0px;
    transform: translateX(0%);
  }
  90%,
  100% {
    overflow: visible;
    right: 100%;
    transform: translateX(-100%);
  }
}

<div class="container">
  <p>Please dont feed the gold fish, they will turn into gremlins and destroy everything they see</p>
</div>