CSS Slide-In Image

This page uses CSS animations to create slide-in images. CSS animations are a standards-compliant way of creating marquees and other animated effects. This method is recommended over the HTML method because the HTML method uses the <marquee> tag, which is not officially part of HTML.

Note: Because slide-in images slide in and then stop, you may need to refresh this page a few times in order to view all examples on the page. This is because the images all start sliding as soon as the page loads.

Top to Bottom

We can use the CSS animation property along with the @keyframes rule to create our sliding image. In this case, we create the slide-in effect by changing the top margin over the course of the animation (i.e. it starts with -100% and ends with 0%).

Source CodeResult
Arrow pointing down
Arrow pointing down
Arrow pointing down
Arrow pointing down
Arrow pointing down

Bottom to Top

Here we simply change the margin-top: -100%; with margin-top: 100%;:

Source CodeResult
Arrow pointing up
Arrow pointing up
Arrow pointing up
Arrow pointing up
Arrow pointing up

Right to Left

To change the image from sliding in vertically to sliding in horizontally, change margin-top to margin-left.

Source CodeResult
Swimming fish

Left to Right

To make the image/s slide in from the other side, simply change margin-left: 100%; to margin-left: -100%;:

Source CodeResult
Spinning arrow Spinning arrow Spinning arrow Spinning arrow Spinning arrow

Changing the Speed

You can change the speed by changing 10s to some other value. This value determines how many seconds the animation will take to iterate through each cycle. In our case, the animation only iterates once, so this is how long the image will take to slide-in.

Let's slow the image down by using 30s (it should take 30 seconds for the image to slide across):

Source CodeResult
Swimming fish

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

Loading