<p> </p> <table width="100%"> <tbody> <tr> <td align="CENTER"> <style><!-- .horizontally { width: 80%; height: 50px; overflow: hidden; position: relative; background: transparent; color: #000; border: 1px solid black; box-shadow: inset 0px 0px 8px #000; } .horizontally p { position: absolute; width: 100%; height: 100%; margin: 0; line-height: 50px; text-align: center; /* Starting position */ -moz-transform:translateX(50%); -webkit-transform:translateX(50%); transform:translateX(50%); /* Apply animation to this element */ -moz-animation: horizontally 5s linear infinite alternate; -webkit-animation: horizontally 5s linear infinite alternate; animation: horizontally 5s linear infinite alternate; } /* Move it (define the animation) */ @-moz-keyframes horizontally { 0% { -moz-transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); } } @-webkit-keyframes horizontally { 0% { -webkit-transform: translateX(50%); } 100% { -webkit-transform: translateX(-50%); } } @keyframes horizontally { 0% { -moz-transform: translateX(50%); /* Browser bug fix */ -webkit-transform: translateX(50%); /* Browser bug fix */ transform: translateX(50%); } 100% { -moz-transform: translateX(-50%); /* Browser bug fix */ -webkit-transform: translateX(-50%); /* Browser bug fix */ transform: translateX(-50%); } } --></style> <div class="horizontally"> <p>Horizontal bounce...CSS..</p> </div> </td> </tr> </tbody> </table>

Very slow...

<p><marquee direction="left" scrollamount="1">Very slow...</marquee></p>

Faster...

<p><marquee direction="left" scrollamount="10">Faster...</marquee></p>

Fast...

<p><marquee direction="left" scrollamount="20">Fast...</marquee></p>

Lightning!

<p><marquee direction="left" scrollamount="50">Lightning!</marquee></p>

<p><marquee style="width: 200px;" direction="right" scrollamount="Х"> <marquee><img src="http://ekladata.com/H1DSo6i_UK8ovXmWB8QwHhi3-t4@132x115.gif" alt="" /></marquee></marquee></p>

Alice au pays des rêves

<p><marquee style="width: 400px;" direction="left">Alice au pays des rêves</marquee></p>

Alice au pays des rêves

<p><marquee style="width: 400px;" direction="right">Alice au pays des rêves</marquee></p>