CSS-移动文本从左至右(CSS-moving text from left to right)

我想创建一个动画HTML“选取框”用于滚动来回在网站上：

<div class="marquee">This is a marquee!</div>

和CSS：

.marquee {
    position: absolute;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

@-webkit-keyframes rightThenLeft {
    0%   {left: 0%;}
    50%  {left: 100%;}
    100% {left: 0%;}
}

问题是，当它到达屏幕的右侧边缘的字幕不会停止; 它移动屏幕（使水平滚动条出现，暂时的）一路掉，然后回来。

那么，如何让我的选取框停止时，其右侧边缘到达屏幕的右侧边缘？

编辑：奇怪的是，这并不工作：

50% {right: 0%}

Answer 1:

不知怎的，我把它用保证金的权利，将其设置为自右向左移动的工作。 http://jsfiddle.net/gXdMc/

不知道为什么这种情况下，边缘向右100％不熄灭屏幕。 ：d（上铬18测试）

编辑：现在左到右的作品太http://jsfiddle.net/6LhvL/

Answer 2:

你可以简单地使用CSS动画文本生成 。 有预创建的模板已

Answer 3:

嗨，你可以实现与使用您的结果<marquee behavior="alternate"></marquee>

HTML

<div class="wrapper">
<marquee behavior="alternate"><span class="marquee">This is a marquee!</span></marquee>
</div>

CSS

.wrapper{
    max-width: 400px;
    background: green;
    height: 40px;
    text-align: right;
}

.marquee {
    background: red;
    white-space: nowrap;
    -webkit-animation: rightThenLeft 4s linear;
}

看到演示： - http://jsfiddle.net/gXdMc/6/

Answer 4:

我喜欢使用以下，以防止事情是超出了我div元素。 它有助于CSS翻车了。

.marquee{
    overflow:hidden;
}

这将隐藏任何移动/是，这将阻止浏览器中展开，并导致滚动条出现在div之外。

Answer 5:

如果我理解您正确的问题，你可以创建一个在你选取框的包装，然后分配一个width （或max-width ），以缠绕元件。 例如：

<div id="marquee-wrapper">
    <div class="marquee">This is a marquee!</div>   
</div>

然后#marquee-wrapper { width: x }

Answer 6:

我不知道这是否是正确的解决方案，但我已经只是动画CSS后重新定义.marquee类实现了这一点。

检查下面：

<style>
#marquee-wrapper{
    width:700px;
    display:block;
    border:1px solid red;
}

div.marquee{
width:100px;
height:100px;
background:red;
position:relative;
animation:myfirst 5s;
-moz-animation:myfirst 5s; /* Firefox */
}

@-moz-keyframes myfirst /* Firefox */{
0%   {background:red; left:0px; top:0px;}
100% {background:red; left:100%; top:0px}
}
div.marquee{ 
left:700px; top:0px
}
</style>

<!-- HTMl COde -->

<p><b>Note:</b> This example does not work in Internet Explorer and Opera.</p>
<div id="marquee-wrapper">
<div class="marquee"></div>

文章来源: CSS-moving text from left to right