CSS文字动画，用于滚动文字 [英] CSS Text Animation for scrolling text

问题描述

我想我已经走了一半，但我需要一些CSS3或jQuery帮助才能完成此滚动文本.

I think I am half way there, but I need some CSS3 or jQuery help to complete this scrolling text.

我有一个div，我需要文本从左向右滚动，然后在到达div的末尾时再次从右向左滚动，依此类推.

I have a div, I need the text to scroll from left to right, then when hitting the end of the div scroll right to left again and so on.

我目前有它从左到右的位置，但是它似乎在div之外运行，我不知道如何使它从右到左，等等.

I currently have it going from left to right, however it seems to run outside of the div and I don't know how to get it going back right to left, and so on.

这是一个演示: 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);}
}

谢谢

推荐答案

我认为解决方案是在%中使用right和translateX并使用absolute定位.

I think the solution is to use right and translateX in % and with absolute positioning.

在animation中添加alternate会向后播放动画.

Adding alternate to animation plays the animation backwards.

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

这篇关于CSS文字动画，用于滚动文字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！