CSS Slide-In Text
This page contains examples of CSS slide-in text. These examples are the CSS version of those on the HTML slide-in Text page. The difference is that the ones on this page are acheived using CSS animations (as opposed to the HTML
Note: Due to the nature of slide-in text, you may need to refresh this page several times to catch all of the examples. This is because, once the text has slid in, it stops. If you don't see it slide in, you've missed it... unless you reload the page!
Right to Left
Here is a basic example of using CSS animations to create slide-in text:
Never fight an inanimate object.
We use the
animation property in conjunction with the
@keyframes rule to define the animation. We've also added an outer
<div> element with
overflow:hidden to contain the slide-in text within the walls of that element. This is optional though.
Left to Right
To change the direction, we simply change the left margin values. Here, our animation starts with a left margin of
-100% and ends with
Everything is funny, as long as it's happening to somebody else.
Bottom to Top
To slide-up just replace the
margin-top. Here, I set the height of the outer
200px to ensure there's enough height to demonstrate the effect. I also set the top margin of the
p element to
0% to ensure that it lines up at the end of the animation (otherwise it might "jump" a few pixels into place at the end of the animation):
Top to Bottom
Here I set the values of
margin-top to start at
-100% and end at
Changing the Speed
Here we slow down the animation by changing the
30s (this causes the animation to take 30 seconds to complete one iteration):
Life is like a box of chocolates. You never know what you're gonna get.
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 :)