CSS Marquees

by trkli

HTML

<div class="marquee">
    <span class="marquee__inner">Surface Book is the first of its kind. This innovative and perfectly crafted laptop is a creative powerhouse, designed to adapt to the way you work – with touch, a Pen, or a mouse.</span>
</div>

CSS

* {
  padding: 0;
  margin: 0;
}

.marquee {
  overflow: hidden;
  position: relative;
  padding-left: 100%;
  animation: reduce 20s linear infinite;
}

.marquee__inner {
  white-space: nowrap;
  display: inline-block;
  animation: scroll 20s linear infinite;
}

@keyframes scroll {
  to {
    transform: translateX( -100% );
  }
}