CSS that can be used to replace the marquee tag

[randyrie]

I see that some browsers are deprecating the ‘marquee’ tag. Any suggestions for what would be a good replacement for it (CSS, jQuery, JavaScript)?

[schpengle]

How to Add the Marquee Effect without Using the Marquee Tag (with CSS,...

[randyrie]

Thanks, @schpengle …

I also found this on W3docs.com and started to use it but the idea of replacing a simple HTML tag with a plethora of coding just doesn’t make any sense. So I decided to use the marquee tag and grumble about the direction web development is going (over the cliff with the rest of the lemmings) until the new PG Interactions eventually addresses this or a far simpler CSS solution is adopted.

(Always looking for the easy way out…)

[schpengle]

It is a bit excessive

…compared to one element tag.

I think the idea is just not to use that sort of thing anymore.
so its not meant to be easy to emmulate.

[RobM]

@randyrie,
I think that the first solution on the page that @schpengle linked is pretty good.You don’t even need all the prefixing these days - native support in about 95% of browsers

So:

.text-for-marquee {
    animation: marquee 10s linear infinite;
}

@keyframes marquee {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

However, if you want an Interactions solution. Add some text to the page (I used an H3 element) then add an interaction

For the animation, add a transform X - set it to off screen first at 100% then tween to -100%

Cheers,
Bob