如何让css3动画永远循环

问题描述 投票：0回答：4

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

添加此样式

animation-iteration-count: infinite;
23
投票

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

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

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

将这个线索与这个其他线索合并，我找到了一个简单的解决方案：在所有动画结束后，包装

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>
之前。

0
投票

我发现的，目前正在使用的：

@keyframes FRA{
    0%{
        transform: rotateZ(360deg);
    }
}

.FR{
    left: 18%;
    top: 20%;
    animation: FRA forwards 2s infinite;
    animation-timing-function: linear;
}

这是上下文

animation-timing-function: linear;

这会丢弃使用动画时的所有中断。确保你的基础动画有无限的，否则它仍然无法工作。祝你好运

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.