<div class="container">
  <div class="block animate">
    Small, scrolling text
  </div>
  
  <div class="block animate">
    Really, really long text that still scrolls to the end
  </div>
</div>

<div class="container wide">
  <div class="block animate quick">
    Small, scrolling text
  </div>
  
  <div class="block animate quick">
    Really, really long text that still scrolls to the end
  </div>
</div>

<div class="container short">
  <div class="block animate">
    Really, really long text that still scrolls to the end
  </div>
</div>

html {
  font-family: 'Open Sans', sans-serif;
}

.container {
  max-width: 30em;
  padding: 0.5em 0;
  margin: 1em auto;
  background: #182a61;
  border-radius: 0.5em;
  box-shadow: 0 0 2em 0.5em rgba(0,0,0,0.25);
  overflow: hidden;
  
  &.short {
    max-width: 15em;
    background: #851c21;
  }
  
  &.wide {
    max-width: 60em;
    background: #214a57;
  }
}

.block {
  display: inline-block;
  margin: 1em 0;
  padding-left: 100%; // Key is padding-left 100%
  color: #FFF;
  font-size: 1.5em;
  font-weight: bold;
  white-space: nowrap;
  transform: translate(0,0);
}

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

.animate {
  animation: marquee 12s linear 1s infinite;
  
  &.quick { animation-duration: 6s; }
}