本文介绍了CSS文字动画,用于滚动文字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我想我已经走了一半,但我需要一些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);}
}

谢谢

推荐答案

我认为解决方案是在%中使用righttranslateX并使用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文字动画,用于滚动文字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-01 11:09