CSSアニメーションでMarqueeを実装し、新幹線車内メディアの電子文字広告を再現する

2000年代のホームページで多用されていたMarquee要素（文字が動くエフェクト）の仕様はすでに廃止されており、いずれブラウザ上で表示できなくなってしまう。
しかし、文字を動かしたい需要はまだ残っている（はず）

代替としてCSSアニメーションをつかったMarqueeの実装方法がある。もちろんJavaScriptは不要だ。
ついでにサンプルで、Marqueeを使った新幹線車内メディアの電子文字広告をつくってみた。

CSSアニメーションでMarqueeを再現する

<div class="marquee-container">
  <p class="message">CSSアニメーションでMarqueeを再現</p>
</div>

.marquee-container {
  background-color: white;
  overflow: hidden;
}

.marquee-container > .message {
  animation-name: marquee;
  animation-timing-function: linear;
  animation-duration: 3s;
  animation-iteration-count: infinite;
  
  /* widthを有効にするため。pタグでなくｓｐanタグを使う場合は不要 */
  display: inline-block;
  /* 折り返されないようにする */
  white-space:nowrap;
  /* .marquee-container分、左にpaddingを設定し、メッセージを右に追い出す */
  padding-left: 100%;
}

@keyframes marquee {
  from { transform: translate(0); }
  to { transform: translate(-100%); }
}

CSSアニメーションをつかって、p要素を右から左へ流している。
padding-left:100%を指定することで、メッセージが右端まで追い出している。あとはtransform: translate(-100%);までlinearでアニメーションしている。

新幹線車内メディアの電子文字広告をつくる

<div class="electric-board">
  <div class="seat-info">
    <div class="info-container">
      <p class="info -ja">指定席</p>
      <p class="info -en">Reserve</p>
    </div>
  </div>
  <div class="message-container">
    <p class="message">新幹線車内メディアの電光文字広告は、64文字のメッセージ、7色から選べる表示色、東京〜新大阪、1ヶ月表示で330万円になります。</p>
  </div>
</div>

//jsFiddleのNormalized cssにチェック
body {
  font-size: 62.5%;
  box-sizing: border-box;
}

.electric-board {
  display: flex;
  flex-direction: row;
  align-items: center;
  
  padding: 10px;
  
  .seat-info {
    height: 90px;
    min-width: 80px;
  }
  .message-container {
    height: 90px;
    margin-left: 10px;
    flex-grow: 1;
  }
}

.electric-board {
  background-color: #9B9B99;
}

.seat-info {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333333;
  color: #A5F91F;

  > .info-container {
    > .info {
      text-align: center;

      &.-ja {
        font-size: 1.3rem;
      }
      &.-en {
        font-size: 0.8rem;
      }
    }
  }
}

.message-container {
  display: flex;
  align-items: center;
  background-color: #333333;
  overflow: hidden;
  width: 100%;
  
  > .message {
    display: inline-block;
    color: white;
    font-size: 2rem;
    white-space:nowrap;
    
    padding-left: 100%;
    
    animation-name: marquee;
    animation-timing-function: linear;
    animation-duration: 15s;
    animation-iteration-count: infinite;
    
    &::after {
      content: '';
      white-space:nowrap;
      padding-right: 100%;
    }
  }
}

@keyframes marquee {
  from { transform: translate(0); }
  to { transform: translate(-100%); }
}

以上

written by @bc_rikko