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 <marquee> tag).

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:

Source Code	Result
<style> div.slide-left { width:100%; overflow:hidden; } div.slide-left p { animation: slide-left 10s; } @keyframes slide-left { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </style> <div class="slide-left"> <p>Never fight an inanimate object.</p> </div>	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 0%:

Source Code	Result
<style> div.slide-right { width:100%; overflow:hidden; } div.slide-right p { animation: 10s slide-right; } @keyframes slide-right { from { margin-left: -100%; width: 300%; } to { margin-left: 0%; width: 100%; } } </style> <div class="slide-right"> <p>Everything is funny, as long as it's happening to somebody else.</p> </div>	Everything is funny, as long as it's happening to somebody else.

Bottom to Top

To slide-up just replace the margin-left with margin-top. Here, I set the height of the outer <div> to 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):

Source Code	Result
<style> div.slide-up { height:200px; overflow:hidden; } div.slide-up p { animation: 10s slide-up; margin-top:0%; } @keyframes slide-up { from { margin-top: 100%; height: 300%; } to { margin-top: 0%; height: 100%; } } </style> <div class="slide-up"> <p>Slide up... </p> </div>	Slide up...

Top to Bottom

Here I set the values of margin-top to start at -100% and end at 0%:

Source Code	Result
<style> div.slide-down { width:100%; overflow:hidden; } div.slide-down p { animation: 10s slide-down; margin-top:0%; } @keyframes slide-down { from { margin-top: -100%; height: 300%; } to { margin-top: 0%; height: 100%; } } </style> <div class="slide-down"> <p>Slide down... </p> </div>	Slide down...

Changing the Speed

Here we slow down the animation by changing the 10s to 30s (this causes the animation to take 30 seconds to complete one iteration):

Source Code	Result
<style> div.slide-slow { width:100%; overflow:hidden; } div.slide-slow p { animation: 30s slide-left; } @keyframes slide-slow { from { margin-left: 100%; width: 300%; } to { margin-slow: 0%; width: 100%; } } </style> <div class="slide-slow"> <p>Life is like a box of chocolates. You never know what you're gonna get.</p> </div>	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:

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