CSS-从左到右移动文本答案

【问题标题】：CSS-moving text from left to rightCSS-从左到右移动文本
【发布时间】：2012-05-27 14:33:00
【问题描述】：

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

【问题讨论】：

使用javascript通过css属性停止动画
@Webtecher javascript 如何知道何时停止动画？
而不是 left: 100% 应该是 left: 100% - ( number of characters in string * space taken by single character ) 现在，显然你不会在 css 中做这样的事情。所以最好不要使用 left 或 right ，而是使用 margin-left 或 margin-right。
是的，但还是不行，即使你把我的代码改成margin-left

标签： css animation marquee keyframe

【解决方案1】：

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

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

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

【讨论】：

是的，这行得通，谢谢:)。希望有人可以评论为什么会这样。我认为这是因为您的 {text-align: right;}
@tanis.control 请参阅我在您的问题中的评论。
请注意，将 css 更改为使用 text-align:left 和 margin-left 不会产生预期的结果。仅适用于 text-align: right 和 margin-right。我已经按照你想要的方向编辑了我的答案:)
如果文本比容器大怎么办？文本不会一起移动。 jsfiddle.net/sj3k6kgu

【解决方案2】：

您可以简单地使用CSS animated text generator。已经有预先创建的模板

【讨论】：

【解决方案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/

【讨论】：

很遗憾，已弃用。

【解决方案4】：

我喜欢使用以下内容来防止事情超出我的div 元素。它也有助于 CSS 翻转。

.marquee{
    overflow:hidden;
}

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

我也想过这个，但是不行。 {left: 100%} 让它一直移出屏幕。我希望我能做到 {left: 100% - 30px}

【解决方案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>

【讨论】：