Efek Marquee Menggunakan CSS3

<style type="text/css">

.myMarquee {width:600px; height:40px; overflow:hidden; position:relative; border:1px solid #aaa; margin:0 auto;
-o-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-moz-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
-webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

-o-border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

background:#4ad;
background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));

}
.scroller {display:block; width:1240px; height:40px; position:absolute; left:0; top:0;
-moz-animation-iteration-count: infinite;
-moz-animation-timing-function: linear;
-moz-animation-duration:10s;
-moz-animation-name: scroll;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
-webkit-animation-duration:10s;
-webkit-animation-name: scroll;
}
.scroller div {font-family:georgia, serif; font-size:16px; line-height:40px; float:left; width:600px; color:#000; font-weight:bold; padding:0 10px;
}
.scroller div a {color:#c00;}

@-moz-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
-moz-animation-play-state: paused;
}


@-webkit-keyframes scroll {
0% {left:0;}
100% {left:-620px;}
}

.scroller:hover {
-webkit-animation-play-state: paused;
}

</style>

<div id="info">

<div class="myMarquee">
<div class="scroller">
<div>An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#x">links</a>.</div>
<div>An auto-running 'Marquee' with 'hover' to stop the scroll, with <a href="#x">links</a>.</div>
</div>
</div>

</div> <!-- end info -->