MArquee example

by Julien Roche

HTML

<section class="marquee">
  <article>Some text A</article>
  <article>Some text B</article>
  <article>Some text C</article>
</section>

CSS

html, body {
  border: 0;
  margin: 0;
  padding: 0;
  width: 100%;
}

body {
  margin: 3rem 0;
}

.marquee {
  article {
    animation: marqueeLeft 5s linear infinite;
    border: 1px solid black;
    display: inline-flex;
    margin: 0 1rem;
    padding: 1rem;
    transform: translateX(0);
  }
}

@keyframes marqueeLeft {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}