CSS-moving text from left to right

Question

I want to create an animated HTML  marquee  that scrolls back and forth on a website    lt div class  marquee  gt This is a marquee  lt  div gt    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

User · Answer

Hi you can achieve your result with use of <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;
}

see the demo:- http://jsfiddle.net/gXdMc/6/

User · Answer

I am not sure if this is the correct solution but I have achieved this  by redefining  marquee class just after animation CSS    Check below    lt style gt   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    lt  style gt    lt  -- HTMl COde -- gt    lt p gt  lt b gt Note  lt  b gt  This example does not work in Internet Explorer and Opera  lt  p gt   lt div id  marquee-wrapper  gt   lt div class  marquee  gt  lt  div gt

User · Answer

If I understand you question correctly  you could create a wrapper around your marquee and then assign a width  or max-width  to the wrapping element  For example    lt div id  marquee-wrapper  gt       lt div class  marquee  gt This is a marquee  lt  div gt      lt  div gt    And then  marquee-wrapper   width  x

User · Answer

I like using the following to prevent things being outside my div elements  It helps with CSS rollovers too    marquee      overflow hidden      this will hide anything that moves is outside of the div which will prevent the browser expanding and causing a scroll bar to appear

User · Answer

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

User · Answer

You could simply use CSS animated text generator  There are pre-created templates already

[css] CSS-moving text from left to right

Examples related to css

Examples related to animation

Examples related to marquee

Examples related to keyframe