電光掲示板のテキスト自動スクロールのような動きを簡単に再現してくれる<marquee>タグは、サイトの「お知らせ」の彩りやデザインのワンポイントとして重宝していたのですが、HTML5で廃止されてしまいました。

しかたなくCSS3を使うことにしたのですが、marquee関連のプロパティがいまひとつ使いにくく、しっくりきません。具体的には、●動きがカクカクする。●スピードが微調整できない。●ブラウザ対応がはっきりしない。などなど…。文字を小さくしたサンプル（１）と電光掲示板のようにしたサンプル（２）、両者とも動きがカクカク、チカチカします。

p.sample1	{
	margin:0; padding:10px 0 4px 0; display:inline-block; white-space:nowrap;	
	overflow-style: auto; overflow: -webkit-marquee; overflow: marquee; 
	marquee-speed: normal; -webkit-marquee-speed: normal;    
 	marquee-play-count: infinite; -webkit-marquee-repetition: infinite;
    }

サンプル

解決策をネットで探していたところ、CSS3 animationを使ったマーキーを見つけました。こちらはなめらかな動きで、スピードの微調整も可能です。サンプル（３）。

.marquee p {
	margin:0; padding-left:600px; display:inline-block; white-space:nowrap;
	animation-name:marquee; animation-timing-function:linear;
	animation-duration:15s; animation-iteration-count:infinite;
	}
@keyframes marquee {
	from   { transform: translate(0%);} 
	99%,to { transform: translate(-100%);}
	}