CSS3 Marquee

Yesterday, I sent out this tweet:

<font color="#FFFF00"><marquee behavior="alternate" bgcolor="black" scrollamount="10">Sometimes I miss the olden days</marquee></font>

— Bramus! (@bramus) February 12, 2013

Rather soon I got a reply by @vormplus:

@bramus we should recreate blink and marquee with css3. Add some extra magic to the web 😉

Sparked by this reply I got started …

Recreating the <blink> tag in CSS3 isn’t that hard (it has been done before). Just use an animation and change the opacity and voilà:

Recreating the <marquee> tag in CSS3 turned out to be quite a different beast though, as the first ventures using position: left and the like turned out to be a dead end. Eventually I got it working using the element CSS function as a value for the background property. This, however, only works in Firefox (as it’s the only browser supporting it).

If you’re wondering why position: left; didn’t work, there’s a little FAQ contained in the embed above. Essentially I’m making good use of the fact that the units used in the background property are based on the width of the background, and not the width of the containing element.