HTML5からは非推奨（廃止？）となり、今となっては懐かしい<marquee> タグ。
内包する要素をスライドさせて表示することができるこのタグは、一時は廃れたかのように見えましたが、最近再び見直されるようになり、同じ動作をするスクリプトが一部のスマートフォン対応サイトなどで使われています。

<marquee> タグが使えないとなると、同じ挙動は JavaScript で実現させようと考えるのが普通でしょうが、今日は CSS3 で marquee を実装する方法を紹介します。

HTML の書き方

	<div class="marquee">
	<p>The quick brown fox jumps over the lazy dog.</p>
	</div>

「marquee」というクラスを与えたボックスでスライドさせたい要素を囲む。これが基本の記述です。
シンプルでいいですよね。
こういった簡単なプログラムコードに複雑さは厳禁です。

CSS3 の書き方

続いて CSS3 側の記述方法です。

	.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%);}
	}

「.marquee」で内包する要素に、「padding-left」で「.marquee」の横幅と同じ値、もしくはそれよりも大きな値を指定しておくことが１つのポイントになります。

あとはanimationとtranslateをそれぞれ指定してなめらかな動きを実現しています。

このコードのデモは以下より。

CSS3 Marquee：サンプル・デモ