HTML5で非推奨とされたMARQUEEタグ。
問：HTML5ではどうするか。
答：CSS3のAnimationを使う。
HTML↓
<div class="marquee">
<p>流れていくテキスト</p>
</div>
CSS
.marquee {
overflow: hidden;
}
.marquee p {
display: inline-block;
white-space: nowrap;
animation-name: marquee;
animation-duration: 20s;
animation-timing-function: linear;
animation-iteration-count: infinite;
}
@keyframes marquee {
from {
margin-left: 100%;
}
to {
transform: translateX(-100%);
}
}
14行目
開始を画面の右端から出す為に画面幅の100%を設定する。
時間の経過と共に0%になっていく。
17行目
終了はテキストが完全に隠れた状態にするため、コンテンツ幅100%分を左に移動させる。
サンプル↓
流れていくテキスト
