Criar o efeito marquee com CSS

1a atrás

Ion

---

0 0

undefined

A tag <marquee> foi muito utilizada antigamente, mas hoje ela é uma tag depreciada e por isso não é aconselhável sua utilização.

Apesar disso, é possível fazer um efeito parecido utilizando #CSS. Para isso, vamos adicionar primeiro nosso HTML:

<div class="marquee"><span>Hello World</span></div>

Agora, adicione o CSS:

.marquee {
  overflow: hidden;
  white-space: nowrap;
}

.marquee span {
  animation: marquee 10s linear infinite;
  display: inline-block;
  padding-left: 100%;
}
    
@keyframes marquee {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(-100%, 0);
  }
}