How to have css3 animation to loop forever

Css Problem Overview

I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page to reload at the end of the last photo fade out. Is there any other way to do this using css???

<html>
	<head>
		<style>
.content{
	height: 400px !important;
	/*margin: auto !important;*/
	overflow: hidden !important;
	width: 780px !important;
}

.imgholder{
	height: 400px;
	margin: auto;
	width: 780px;
}

.photo1{
	opacity: 0;
	        animation: fadeinphoto 7s 1; 
	   -moz-animation: fadeinphoto 7s 1; 
	-webkit-animation: fadeinphoto 7s 1; 
	     -o-animation: fadeinphoto 7s 1; 
	float: left;
	position: relative;
	top: 0px;
	z-index: 1;
}

.photo2 {
	opacity: 0;
	        animation: fadeinphoto 7s 5s 1;
	   -moz-animation: fadeinphoto 7s 5s 1;
	-webkit-animation: fadeinphoto 7s 5s 1;
	     -o-animation: fadeinphoto 7s 5s 1;
	float: left;
	position: relative;
	top: -400px;
	z-index: 1;
}
.photo3 {
	opacity:0;
	        animation: fadeinphoto 7s 10s 1;
	   -moz-animation: fadeinphoto 7s 10s 1;
	-webkit-animation: fadeinphoto 7s 10s 1;
	     -o-animation: fadeinphoto 7s 10s 1;
	float: left;
	position: relative;
	top: -800px;
	z-index: 1;
}

.photo4 {
	opacity: 0;
	animation: fadeinphoto 7s 15s 1;
	-moz-animation: fadeinphoto 7s 15s 1;
	-webkit-animation: fadeinphoto 7s 15s 1;
	-o-animation: fadeinphoto 7s 15s 1;
	float: left;
	position: relative;
	top: -1200px;
	z-index: 1;
}

.photo5 {
	opacity: 0;
	        animation: fadeinphoto 7s 20s 1;
	   -moz-animation: fadeinphoto 7s 20s 1;
	-webkit-animation: fadeinphoto 7s 20s 1;
	     -o-animation: fadeinphoto 7s 20s 1;
	float: left;
	position: relative;
	top: -1600px;
	z-index: 1;
}

/* Animation Keyframes*/
@keyframes fadeinphoto {
	0% { opacity: 0; }
	50% { opacity: 1; }
	100% { opacity: 0; }
}

@-moz-keyframes fadeinphoto {
	0% { opacity: 0; }
	50% { opacity: 1; }
	A100% { 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; }
}
		</style>
		<body>
			<div class="content">
				<div class="imgholder">
					<img src="images/image1.jpg" width="780" height="400" class="photo1"/>
					<img src="images/image2.JPG" width="780" height="400" class="photo2"/>
					<img src="images/image3.JPG" width="780" height="400" class="photo3"/>
					<img src="images/image4.jpg" width="780" height="400" class="photo4"/>
					<img src="images/image5.jpg" width="780" height="400" class="photo5"/>
				</div>
			</div>
		</body>
	</head>
</html>

Css Solutions

Solution 1 - Css

add this styles

animation-iteration-count: infinite;

Solution 2 - Css

Whilst Elad's solution will work, you can also do it inline:

   -moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
     -o-animation: fadeinphoto 7s 20s infinite;
        animation: fadeinphoto 7s 20s infinite;

Solution 3 - Css

I stumbled upon the same problem: a page with many independent animations, each one with its own parameters, which must be repeated forever.

Merging this clue with this other clue I found an easy solution: after the end of all your animations the wrapping div is restored, forcing the animations to restart.

All you have to do is to add these few lines of Javascript, so easy they don't even need any external library, in the <head> section of your page:

<script>
setInterval(function(){
var container = document.getElementById('content');
var tmp = container.innerHTML;
container.innerHTML= tmp;
}, 35000 // length of the whole show in milliseconds
);
</script>

BTW, the closing </head> in your code is misplaced: it must be before the starting <body>.

Content Type	Original Author	Original Content on Stackoverflow
Question	CuRSoR	View Question on Stackoverflow
Solution 1 - Css	Elad Shechter	View Answer on Stackoverflow
Solution 2 - Css	Mark Eriksson	View Answer on Stackoverflow
Solution 3 - Css	Marco Bernardini	View Answer on Stackoverflow

How to have css3 animation to loop forever

Css Problem Overview

Css Solutions

Solution 1 - Css

Solution 2 - Css

Solution 3 - Css

subprocess.check_output return code

How can I force homebrew to recompile?

Attributions