CSS Bouncing Text

You can create bouncing text using CSS animations. This achieves the same effect as the HTML version with the added benefit that CSS animations are being included in the official CSS specification (so it's standard compliant).

Note that the examples below use vendor extensions as well as a little browser fix. To make this standards compliant, you will need to remove all vendor extensions (i.e. the ones that start with -moz- and -webkit-).

Side to Side

Here we use translateX() to make our text bounce horizontally.

Source CodeResult

Horizontal bounce...

Up & Down

Here we use translateY() to make our text bounce vertically:

Source CodeResult

Vertical bounce...

Changing the Speed

To change the speed of your bouncing text, change 5s to some other value. Let's change it to 1s (which means it will take 1 second for the animation to make one iteration).

Source CodeResult

Fast bounce...

More Marquee Codes

You can do much more with HTML marquees than is covered on this page. Here's the full list of marquee codes on this website:

Marquee Generator

Also check out the Marquee Generator.

Marquee Usability

Try to be careful when using HTML marquees. Many web users dislike websites that contain scrolling or bouncing images and other elements, so try to use them tastefully :)