MARQUEEタグの代わり

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%分を左に移動させる。

サンプル↓

流れていくテキスト