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