如何让css3动画永远循环
Posted
技术标签:
【中文标题】如何让css3动画永远循环【英文标题】：How to have css3 animation to loop forever 【发布时间】：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" class="photo1"/>
<img src="images/image2.JPG" class="photo2"/>
<img src="images/image3.JPG" class="photo3"/>
<img src="images/image4.jpg" class="photo4"/>
<img src="images/image5.jpg" class="photo5"/>
</div>
</div>
</body>
</head>
</html>
【问题讨论】：
对animation-iteration-count使用infinite关键字
【参考方案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。以上是关于如何让css3动画永远循环的主要内容，如果未能解决你的问题，请参考以下文章