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 :)

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

Need Hosting?

Our partner site ZappyHost provides website hosting, domain names and related products at some of the best prices on the web. If you need web hosting, check them out!