CSS-移动的文字从左至右

我想创建一个动画HTML“选取框”用于滚动来回网站：CSS-移动的文字从左至右

<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%}

来源

2012-05-21 tanis.control

使用javascript停止使用css属性的动画 – 2012-05-21 04:03:23

@Webtecher javascript如何知道何时停止动画？ –

而不是左：100％应该留下：'100％ - （字符串中的字符数*空格由单个字符占用）'现在，显然你不会在CSS中做这样的事情。所以最好不要使用'left'或'right'，而是使用'margin-left'或'margin-right'。 –

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

不知道为什么这种情况下，保证金100％的权利不会离开屏幕。：d （在Chrome 18测试）

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

来源

2012-05-21 04:45:41 ephemeron

也在Safari上进行测试。工作很好:) –

是的，这工作，谢谢:)。希望有人可以评论为什么是这样。我认为这是因为你的{text-align：right;} –

@ tanis.control在你的问题中看到我的评论。 –

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

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

然后#marquee-wrapper { width: x }。

来源

2012-05-21 04:04:22 David542

我也想到了这一点，但它不起作用。 {left：100％}使其一直移动到屏幕上。我希望我能做{left：100％ - 30px} –

我不确定这是否是正确的解决方案，但我通过在动画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>

来源

2012-05-21 04:42:17

嗨，你可以使用<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/

来源

2012-05-21 07:30:13

不幸的是，已弃用。 – wizzwizz4