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
Bottom to Top
Here we simply change the
margin-top: -100%; with
Right to Left
To change the image from sliding in vertically to sliding in horizontally, change
Left to Right
To make the image/s slide in from the other side, simply change
margin-left: 100%; to
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):
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 :)