如何让css3动画永远循环

Question

如何让css3动画永远循环

CuR*_*SoR 51 css animation loops keyframe forever

我想让整套动画永远发挥.当最后一张照片消失时,我希望第一张照片再次出现.我所做的(我不喜欢)将页面设置为在最后一张照片淡出时重新加载.还有其他方法可以使用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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Ela*_*ter 69

添加此样式

animation-iteration-count:infinite;

Run Code Online (Sandbox Code Playgroud)

还可以提到CuRSoR已经用速记来定义迭代次数:`animation:fadeinphoto 7s 20s 1;`最后一个数字(1)是迭代次数.只需将其更改为"无限",或按照Elads回答中的建议添加完整的CSS规则. (5认同)
这将使EACH动画永远播放。我想让所有动画都一个接一个地播放，然后重复。如果您注意到了，第一张照片会在页面加载后立即显示，第二张照片会延迟5秒，第三张照片会延迟10秒，依此类推。如果将每个EACH的迭代次数设置为无穷大，则会导致照片顺序混乱。有没有办法将所有动画“分组”在一起并将整个组的迭代次数设置为无限大？ (2认同)

Answer 2

Mar*_*son 14

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

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，4 月前
查看次数：	98699 次
最近记录：	7 年，10 月前