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
Side to Side
Here we use
translateX() to make our text bounce horizontally.
Up & Down
Here we use
translateY() to make our text bounce vertically:
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).
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:
Also check out the Marquee Generator.
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 :)