如何让css3动画永远循环答案

【问题标题】：How to have css3 animation to loop forever如何让css3动画永远循环
【发布时间】：2014-06-20 22:31:12
【问题描述】：

我想让整套动画永远播放。当最后一张照片消失时，我希望第一张照片再次出现，依此类推。我所做的（我不喜欢）将页面设置为在最后一张照片淡出时重新加载。有没有其他方法可以使用 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关键字

标签： css loops animation keyframe forever

【解决方案1】：

添加此样式

animation-iteration-count: infinite;

【讨论】：

还可以提一下，CuRSoR 已经在简写中定义了迭代次数：animation: fadeinphoto 7s 20s 1; 最后一个数字（1）是迭代次数。只需将其更改为 infinite，或按照 Elads 答案中的建议添加完整的 CSS 规则。
这将导致每个动画永远播放。我想让所有动画一个接一个地播放，然后重复。如果您注意到，第一张照片会在页面加载后立即出现，第二张会延迟 5 秒，第三张会延迟 10 秒，以此类推。如果我将 EACH one 的迭代设置为无限，则会导致照片的顺序混乱。有没有办法将所有动画“分组”在一起并将整个组的迭代设置为无限？
您可以为每张照片添加静态关键帧，这样所有照片基本上都在循环一个长动画，但有效地制作动画，然后等待其他照片。

【解决方案2】：

虽然 Elad 的解决方案可行，但您也可以内联：

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

【讨论】：

【解决方案3】：

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

将this clue 与this other clue 合并我找到了一个简单的解决方案：在所有动画结束后，包装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> 之前。

【讨论】：

抱歉，我无法编辑它。您不应该在间隔后添加分号（在本例中为 35000），否则将不起作用。感谢您的贡献。
不要使用这个。这可能会导致巨大的混乱。例如。您必须处理重新附加附加的事件处理程序和类似的东西。再加上 DOM 会无缘无故地适应。如果你在这个 sn-p 中有外部源，那么每次重放动画时它们实际上可能会被重新获取！而是像其他答案一样添加关键字initite。