CSS-移动文本从左至右

问题描述

我想创建一个动画HTML金字招牌的滚动来回网站：

 ＆LT; D​​IV CLASS =金字招牌＆gt;这是一个大帐篷＆LT;！/ DIV＆GT;
 

和CSS的：

  .marquee {
    位置：绝对的;
    空格：NOWRAP;
    -webkit-动画：rightThenLeft 4S线性的;
}@ -webkit-关键帧rightThenLeft {
    0％{左：0％;}
    50％{左：100％;}
    100％{左：0％;}
}
 

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

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

编辑：奇怪的是，这不起作用：

  50％{右：0％}
 

解决方案

不知怎的，我得到了它通过使用保证金的权利，将其设置为自右向左移动到工作。

不知道为什么这种情况下，保证金右100％不熄灭屏幕。 ：D
（在Chrome 18测试）

编辑：现在左到右的作品太

I want to create an animated HTML "marquee" that scrolls back and forth on a website:

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

and the CSS:

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

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

The problem is, the marquee doesn't stop when it reaches the right-hand edge of the screen; it moves all the way off the screen (making a horizontal scroll bar appear, briefly) and then comes back.

So, how do I make the marquee stop when its right-hand edge reaches the right-hand edge of the screen?

EDIT: Oddly, this does not work:

50% {right: 0%}

解决方案

Somehow I got it to work by using margin-right, and setting it to move from right to left.http://jsfiddle.net/gXdMc/

Don't know why for this case, margin-right 100% doesn't go off the screen. :D(tested on chrome 18)

EDIT: now left to right works too http://jsfiddle.net/6LhvL/

这篇关于CSS-移动文本从左至右的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！