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 Code	Result
<style> div.slide-down { height:300px; overflow:hidden; } div.slide-down div.inner { animation: slide-downs 10s; margin-top:0%; } @keyframes slide-down { from { margin-top: -100%; } to { margin-top: 0%; } } </style> <div class="slide-down"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br> </div> </div>

Source Code

Result

<style>
div.slide-down {
  height:300px;
  overflow:hidden;
}
div.slide-down div.inner {
  animation: slide-downs 10s;
  margin-top:0%;
}

@keyframes slide-down {
  from {
    margin-top: -100%;
  }

  to {
    margin-top: 0%;
  }
}
</style>

<div class="slide-down">
<div class="inner">
<img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-down.gif" alt="Arrow pointing down"><br>
</div>
</div>

Bottom to Top

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

Source Code	Result
<style> div.slide-up { height:300px; overflow:hidden; } div.slide-up div.inner { animation: slide-up 10s; margin-top:0%; } @keyframes slide-up { from { margin-top: 100%; } to { margin-top: 0%; } } </style> <div class="slide-up"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br> <img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br> </div> </div>

Source Code

Result

<style>
div.slide-up {
  height:300px;
  overflow:hidden;
}
div.slide-up div.inner {
  animation: slide-up 10s;
  margin-top:0%;
}

@keyframes slide-up {
  from {
    margin-top: 100%;
  }

  to {
    margin-top: 0%;
  }
}
</style>

<div class="slide-up">
<div class="inner">
<img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br>
<img src="//www.html.am/images/html-codes/marquees/arrow-up.gif" alt="Arrow pointing up"><br>
</div>
</div>

Right to Left

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

Source Code	Result
<style> div.slide-left { width:100%; overflow:hidden; } div.slide-left div.inner { animation: slide-left 10s; margin-top:0%; } @keyframes slide-left { from { margin-left: 100%; } to { margin-left: 0%; } } </style> <div class="slide-left"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div>

Left to Right

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

Source Code	Result
<style> div.slide-right { width:100%; overflow:hidden; } div.slide-right div.inner { animation: slide-right 10s; margin-top:0%; } @keyframes slide-right { from { margin-left: -100%; } to { margin-left: 0%; } } </style> <div class="slide-right"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> <img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow"> </div> </div>

Source Code

Result

<style>
div.slide-right {
  width:100%;
  overflow:hidden;
}
div.slide-right div.inner {
  animation: slide-right 10s;
  margin-top:0%;
}

@keyframes slide-right {
  from {
    margin-left: -100%;
  }

  to {
    margin-left: 0%;
  }
}
</style>

<div class="slide-right">
<div class="inner">
<img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow">
<img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow">
<img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow">
<img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow">
<img src="//www.html.am/images/html-codes/marquees/spinning-arrow-right.gif" alt="Spinning arrow">
</div>
</div>

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 Code	Result
<style> div.slide-slow { width:100%; overflow:hidden; } div.slide-slow div.inner { animation: slide-slow 30s; margin-top:0%; } @keyframes slide-slow { from { margin-left: 100%; } to { margin-left: 0%; } } </style> <div class="slide-slow"> <div class="inner"> <img src="//www.html.am/images/html-codes/marquees/fish-swimming.gif" alt="Swimming fish"> </div> </div>

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