CSS Marquee like Bullet train Ad

by bc_rikko

HTML

<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>

SCSS

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