CSS 如何让css3动画永远循环
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23458640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to have css3 animation to loop forever
提问by CuRSoR
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???
我想让整套动画永远播放。当最后一张照片淡出时，我希望第一张再次出现，以此类推。我所做的（我不喜欢）是将页面设置为在最后一张照片淡出结束时重新加载。有没有其他方法可以使用 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>
回答by Elad Shechter
add this styles
添加此样式
animation-iteration-count:infinite;
回答by Mark Eriksson
Whilst Elad's solution will work, you can also do it inline:
虽然 Elad 的解决方案可行，但您也可以内联进行：
-moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
-o-animation: fadeinphoto 7s 20s infinite;
animation: fadeinphoto 7s 20s infinite;
回答by Marco Bernardini
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 cluewith this other clueI found an easy solution: after the end of all your animations the wrapping divis restored, forcing the animations to restart.
将此线索与另一条线索合并，我找到了一个简单的解决方案：在所有动画结束后，包装div被恢复，强制动画重新启动。
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:
您所要做的就是在<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>
BTW, the closing </head>in your code is misplaced: it must be before the starting <body>.
顺便说一句，</head>您代码中的结束位置放错了位置：它必须在开始之前<body>。
