如何让css3animation永久循环
我想要让整套animation永久播放。 当最后一张照片淡出时，我想让第一张照片再次出现。 我做了什么（我不喜欢）设置页面重新加载在最后一张照片的淡出。 有没有其他的方法来做到这一点使用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> 添加这个样式
animation-iteration-count:infinite;
Elad的解决scheme可以工作，但你也可以直接进行：
-moz-animation: fadeinphoto 7s 20s infinite; -webkit-animation: fadeinphoto 7s 20s infinite; -o-animation: fadeinphoto 7s 20s infinite; animation: fadeinphoto 7s 20s infinite;
我偶然发现了同样的问题：一个拥有许多独立animation的页面，每个页面都有自己的参数，必须永久重复。
合并这个线索与这个其他的线索，我发现一个简单的解决scheme：所有的animation结束后，包装div被恢复，迫使animation重新启动。
所有你需要做的就是添加这几行Javascript，很简单，甚至不需要任何外部库，在页面的<head>部分：
<script> setInterval(function(){ var container = document.getElementById('content'); var tmp = container.innerHTML; container.innerHTML= tmp; }, 35000 // length of the whole show in milliseconds ); </script>
顺便说一句，你的代码中的closures</head>是错误的：它必须在开始<body> 。
