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 CodeResult

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 CodeResult

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 CodeResult

Slide up...

Top to Bottom

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

Source CodeResult

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 CodeResult

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

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.

My Related Sites

Here are some of my other sites: