Rolling text

by Marc Malignan

HTML

<div class="rollingtext">
  <span>Découvrez notre Collection Printemps et recevez un cabas* offert dans votre première commande de la saison. </span>
  <span>Découvrez notre Collection Printemps et recevez un cabas* offert dans votre première commande de la saison. </span>
</div>

CSS

body {
  background: silver;
}

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

.rollingtext {
  --animation-duration: 10s;
  
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  background: white;
}

.rollingtext > span {
  display: inline-block;
  line-height: 30px;
  animation: rollText var(--animation-duration) linear infinite;
}