CSS3 でmarqueeを再現 http://on-ze.com/archives/648
<div class="marquee">
<p>The quick brown fox jumps over the lazy dog.</p>
</div>
/*簡単な書き方*/
.marquee {
overflow:-webkit-marquee;
white-space:nowrap;
}
/*全ブラウザ対応*/
.marquee {
width:600px;
padding:0.5em 0;
overflow:hidden;
background-color:#f6f6f6;
margin-bottom:10px;
position:relative;
}
.marquee p:after {
content:"";
white-space:nowrap;
padding-right:50px;
}
.marquee p {
margin:0;
padding-left:600px;
display:inline-block;
white-space:nowrap;
-webkit-animation-name:marquee;
-webkit-animation-timing-function:linear;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:marquee;
-moz-animation-timing-function:linear;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite;
-ms-animation-name:marquee;
-ms-animation-timing-function:linear;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite;
-o-animation-name:marquee;
-o-animation-timing-function:linear;
-o-animation-duration:10s;
-o-animation-iteration-count:infinite;
animation-name:marquee;
animation-timing-function:linear;
animation-duration:10s;
animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
from { -webkit-transform: translate(0%);}
99%,to { -webkit-transform: translate(-100%);}
}
@-moz-keyframes marquee {
from { -moz-transform: translate(0%);}
99%,to { -moz-transform: translate(-100%);}
}
@-ms-keyframes marquee {
from { -ms-transform: translate(0%);}
99%,to { -ms-transform: translate(-100%);}
}
@-o-keyframes marquee {
from { -o-transform: translate(0%);}
99%,to { -o-transform: translate(-100%);}
}
@keyframes marquee {
from { transform: translate(0%);}
99%,to { transform: translate(-100%);}
}