logo标签列表

如何让CSS3动画循环播放？

cssloopsanimationkeyframeforever
80

我希望整个动画循环播放，最后一张图片淡出后，第一张图片再次出现，如此循环。我所做的是设置页面在最后一张图片淡出时重新加载，但我不喜欢这样做。有没有其他使用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>
2
使用infinite关键字来设置animation-iteration-count的无限循环。 - King King
4个回答
114

添加这些样式

animation-iteration-count: infinite;
7
也可以提到，CuRSoR已经在简写中定义了迭代次数：animation: fadeinphoto 7s 20s 1; 最后一个数字（1）是迭代次数。只需将其更改为“infinite”，或者按照Elads的建议添加完整的CSS规则即可。 - agrm
2
这将导致每个动画都无限循环播放。我想让所有动画依次播放，然后重复。如果您注意到，第一张照片会在页面加载后立即出现，第二张照片会在5秒延迟后开始，第三张照片会在10秒延迟后开始，以此类推。如果我将每个动画的迭代设置为无限，则会导致照片的顺序混乱。是否有一种方法可以“分组”所有动画并将整个组的迭代设置为无限？ - CuRSoR
你可以为每个图片添加静态关键帧，这样所有的照片本质上都循环播放着一段长动画，但实际上是相互交替着动画和等待。 - Adam Tolley
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;
1
我发现并且目前正在使用的是：
@keyframes FRA{
    0%{
        transform: rotateZ(360deg);
    }
}

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

这是上下文
animation-timing-function: linear;

这会在使用动画时丢弃所有的间隔。确保你的基本动画中有无限循环，否则它仍然不会起作用。祝你好运。
0

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

将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> 前面。
2
抱歉，我无法进行编辑。在间隔（在此情况下为35000）之后不应添加分号，否则它将无法正常工作。感谢您的贡献。 - Fernando
2
不要使用这个。这可能会导致一团糟。例如，您必须处理重新附加的事件处理程序和类似的东西。此外，DOM 无缘无故地被调整。如果在此片段中有外部来源，则每次重播动画时它们可能会被重新获取！相反，只需像其他答案中那样添加关键字“initite”。 - Hafenkranich
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接