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 Code | Result |
---|---|
Horizontal bounce... |
Up & Down
Here we use translateY()
to make our text bounce vertically:
Source Code | Result |
---|---|
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 Code | Result |
---|---|
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 :)