How to Animate Pictures in CSS Forever

In this article, we'll address a common question revolving around CSS3 animations: making them run indefinitely.

The Challenge

Suppose you have a series of photos you want to display as a slideshow, transitioning smoothly between them using CSS3 animation. However, you're not satisfied with the default behavior, where the last photo fades out and the page reloads, effectively restarting the slideshow.

The Solution

To achieve seamless looping animation, we need to modify the CSS to specify that the animation should iterate continuously. By default, CSS animations are set to run only once.

The key property we'll add to our CSS is animation-iteration-count. Here's an example:

@keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-webkit-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@-o-keyframes fadeinphoto {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

.photo1 {
  opacity: 0;
  animation: fadeinphoto 7s 1;
  animation-iteration-count: infinite;
  -moz-animation: fadeinphoto 7s 1;
  -webkit-animation: fadeinphoto 7s 1;
  -o-animation: fadeinphoto 7s 1;
}

By setting animation-iteration-count to infinite, the animation will continue to loop indefinitely, creating a seamless transition between your photos.