用于滚动文本的CSS文本动画[重复]

我想我已经完成了一半，但我需要一些 CSS3 或 jQuery 帮助来完成这个滚动文本。

我有一个 div，我需要文本从左向右滚动，然后当点击 div 末尾时再次从右向左滚动，依此类推。

我目前从左到右，但它似乎在 div 之外运行，我不知道如何让它从右到左，等等。

这是一个演示：http://jsfiddle.net/vdb3ofmL/1118/ http://jsfiddle.net/vdb3ofmL/1118/

#movetxt {
    -webkit-animation: moving 5s infinite;
    animation: moving 5s infinite;
}

@-webkit-keyframes moving {
    from {-webkit-transform: translateX(0px);}
    to {-webkit-transform: translateX(200px);}
}

@keyframes moving {
    from {transform: translateX(0px);}
    to {transform: translateX(200px);}
}

Thanks

我认为解决方案是使用right and translateX in %与absolute定位。

Adding alternate to animation向后播放动画。

.container {
  margin: 0 auto;
  width: 300px;
  border: 1px solid red;
  position: relative;
  overflow: hidden;
  height: 1em;
}

#movetxt {
  animation: moving 2s infinite linear alternate;
  position: absolute;
  white-space: nowrap;
}

@keyframes moving {
    from {
      transform: translateX(100%);
      right: 100%;
      }
    to {
      transform: translateX(0%);
      right: 0%;
      }
}

<div class="container">
<div id="movetxt">left to right, right to left</div>
</div>