如何让 css3动画永远循环

我想有整套动画永远播放。当最后一张照片淡出时，我希望第一张照片再次出现，以此类推。我所做的(我不喜欢)是设置在最后一张照片淡出结束页面重新加载。有没有其他的方法来做这个使用 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>

173449

小开

我偶然发现了同样的问题: 一个包含许多独立动画的页面，每个页面都有自己的参数，这些参数必须永远重复。

合并这条线索与另一条线索我发现了一个简单的解决方案: 在所有的动画结束后，包装 div是恢复，迫使动画重新启动。

你所要做的就是在页面的 <head>部分添加这几行 Javascript 代码，它们非常简单，甚至不需要任何外部库:

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

顺便说一下，在你的代码中关闭 </head>是错误的: 它必须在开始 <body>之前。