CSS从左到右移动文本

Question

我想创建一个在网站上来回滚动的动画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

不知何故，我通过使用 margin-right 并将其设置为从右向左移动来使其工作。 http://jsfiddle.net/gXdMc/

不知道为什么在这种情况下，margin-right 100% 不会离开屏幕。:D（在 chrome 18 上测试）

编辑：现在从左到右也可以工作http://jsfiddle.net/6LhvL/