Fatal编程技术网
  • css/
  • 如何让css3动画永远循环

如何让css3动画永远循环

css loops animation

如何让css3动画永远循环,css,loops,animation,keyframe,forever,Css,Loops,Animation,Keyframe,Forever,我想让整套动画永远播放下去。当最后一张照片淡出时，我希望第一张照片再次出现，以此类推。我所做的（但我不喜欢）是将页面设置为在最后一张照片淡出结束时重新加载。有没有其他方法可以使用css来实现这一点 <html> <head> <style> .content{ height: 400px !important; /*margin: auto !important;*/ overflow: hidden !impo

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


.内容{
高度：400px！重要；
/*保证金：自动！重要*/
溢出：隐藏！重要；
宽度：780px！重要；
}
伊姆戈尔德先生{
高度：400px；
保证金：自动；
宽度：780px；
}
.照片1{
不透明度：0；
动画：fadeinphoto 7s1；
-moz动画：fadeinphoto 7s1；
-webkit动画：fadeinphoto 7s1；
-o-动画：fadeinphoto 7s1；
浮动：左；
位置：相对位置；
顶部：0px；
z指数：1；
}
.照片2{
不透明度：0；
动画：fadeinphoto 7s 5s 1；
-moz动画：fadeinphoto 7s 5s 1；
-webkit动画：fadeinphoto 7s 5s 1；
-o-动画：fadeinphoto 7s 5s 1；
浮动：左；
位置：相对位置；
顶部：-400px；
z指数：1；
}
.照片3{
不透明度：0；
动画：fadeinphoto 7s10s1；
-moz动画：fadeinphoto 7s10s1；
-webkit动画：fadeinphoto 7s10s1；
-o-动画：fadeinphoto 7s10s1；
浮动：左；
位置：相对位置；
顶部：-800px；
z指数：1；
}
.照片4{
不透明度：0；
动画：fadeinphoto 7s15s1；
-moz动画：fadeinphoto 7s15s1；
-webkit动画：fadeinphoto 7s15s1；
-o-动画：fadeinphoto 7s 15s 1；
浮动：左；
位置：相对位置；
顶部：-1200px；
z指数：1；
}
.照片5{
不透明度：0；
动画：fadeinphoto 7s20s1；
-moz动画：fadeinphoto 7s 20s 1；
-webkit动画：fadeinphoto 7s 20s 1；
-o-动画：fadeinphoto 7s 20s 1；
浮动：左；
位置：相对位置；
顶部：-1600px；
z指数：1；
}
/*动画关键帧*/
@关键帧fadeinphoto{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：0；}
}
@-moz关键帧fadeinphoto{
0%{不透明度：0；}
50%{不透明度：1；}
A100%{不透明度：0；}
}
@-webkit关键帧fadeinphoto{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：0；}
}
@-o-关键帧fadeinphoto{
0%{不透明度：0；}
50%{不透明度：1；}
100%{不透明度：0；}
}
添加此样式

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

与我合并发现了一个简单的解决方案：在所有动画结束后，包装
div
将被恢复，强制重新启动动画

您所要做的就是在页面的
部分添加这几行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>


setInterval（函数（）{
var container=document.getElementById（'content'）；
var tmp=container.innerHTML；
container.innerHTML=tmp；
}，35000//整个节目的长度（毫秒）
);
顺便说一句，代码中的结束
放错了位置：它必须在开始

之前。虽然Elad的解决方案可以工作，但您也可以在线执行：

   -moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
     -o-animation: fadeinphoto 7s 20s infinite;
        animation: fadeinphoto 7s 20s infinite;
使用
无限
关键字进行
动画迭代计数
还可以提到，游标已经用速记定义了迭代次数：
动画：fadeinphoto 7s 20s 1最后一个数字（1）是迭代次数。只需将其更改为
infinite
，或添加Elads答案中建议的完整CSS规则。这将使每个动画永远播放。我想有所有的动画播放，一个接一个，然后重复。如果您注意到，第一张照片在页面加载后立即出现，第二张照片延迟5秒，第三张照片延迟10秒，依此类推。如果我将每一张照片的迭代设置为无限，就会导致照片的顺序混乱。是否有一种方法可以将所有动画“分组”在一起，并将整个组的迭代设置为无限？您可以为每个动画添加静态关键帧，这样所有照片基本上都循环一个长动画，但有效地设置动画，然后等待其他动画。抱歉，我无法编辑它。您不应该在间隔后添加分号（在本例中为35000），否则它将不起作用。谢谢你的贡献。不要用这个。这可能会导致一片混乱。例如，您必须处理重新附加附加事件处理程序之类的问题。另外，DOM会毫无理由地进行调整。如果在这个片段中有外部源，那么每次回放动画时，它们实际上可能会被重新蚀刻！相反，只需像其他答案一样添加关键字
initite
。