web-dev-qa-db-ja.com

CSSでテキストを左から右に移動

Webサイトで前後にスクロールするアニメーション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%}
cssanimationmarqueekeyframe
6
tanis.control

どういうわけか、margin-rightを使用して、右から左に移動するように設定することで機能しました。 http://jsfiddle.net/gXdMc/

この場合の理由がわからない、右マージン100％が画面から消えない。 ：D（chrome 18でテスト）

編集：左から右へも機能するようになりました http://jsfiddle.net/6LhvL/

3
ephemeron

単純に CSSアニメーションテキストジェネレーター を使用できます。すでに作成済みのテンプレートがあります

4
Timur Gafforov

div要素の外にあるものを防ぐために、以下を使用するのが好きです。 CSSロールオーバーにも役立ちます。

.Marquee{
    overflow:hidden;
}

これにより、divの外にある、またはdivの外にあるものはすべて非表示になり、ブラウザーが拡張されてスクロールバーが表示されなくなります。

1
Spider Pig

こんにちは、<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/

1
Shailender Arora

これが正しい解決策かどうかはわかりませんが、アニメーション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>
0
sachin kumar

私があなたの質問を正しく理解している場合は、マーキーの周りにラッパーを作成し、width（またはmax-width）をラッピング要素に追加します。例えば：

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

その後 #Marquee-wrapper { width: x }。

0
David542