CSS3によるマーキー(marquee)

marqueeタグは一部のブラウザしかサポートしていないため、HTML5では廃止が予定されているタグです。
代替としてはjs(javascript)やCSS3があります。
ここではCSS3での記述方法を紹介します。

HTML

<div class="marquee">
  <p>移動するテキスト</p>
</div>

CSS


.marquee {
  overflow:hidden;
  margin:0;
  padding:0.2em 0;
  background:#333;
}
.marquee p {
  width:100%;
  text-align:center;
  display:inline-block;
  white-space:nowrap;
  color:#fff;
  font-size:12px;
  -moz-animation-name:marquee;
  -moz-animation-duration:20s;
  -moz-animation-timing-function:linear;
  -moz-animation-iteration-count:infinite;
  -webkit-animation-name:marquee;
  -webkit-animation-duration:20s;
  -webkit-animation-timing-function:linear;
  -webkit-animation-iteration-count:infinite;
  -o-animation-name:marquee;
  -o-animation-duration:20s;
  -o-animation-timing-function:linear;
  -o-animation-iteration-count:infinite;
  animation-name:marquee;
  animation-duration:20s;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@-webkit-keyframes marquee {
  from {margin-left:100%; width:100%;}
  to {margin-left:-100%; width:100%;}
}
@-moz-keyframes marquee {
  from {margin-left:100%; width:100%;}
  to {margin-left:-100%; width:100%;}
}
@-o-keyframes marquee {
  from {margin-left:100%; width:100%;}
  to {margin-left:-100%; width:100%;}
}
@keyframes marquee {
  from {margin-left:100%; width:100%;}
  to {margin-left:-100%; width:100%;}
}

↓上記CSSスタイルをあてた状態(ボックスの位置設定を別途入れています)

移動するテキスト