如何让css3动画永远循环 [英] How to have css3 animation to loop forever
本文介绍了如何让css3动画永远循环的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想让整套动画永远播放.当最后一张照片淡出时，我希望第一张再次出现，以此类推.我所做的(我不喜欢)是将页面设置为在最后一张照片淡出结束时重新加载.有没有其他方法可以使用 css 来做到这一点???
<头><风格>.内容{高度:400px！重要；/*边距:自动！重要；*/溢出:隐藏！重要；宽度:780px！重要；}.imgholder{高度:400px；保证金:自动；宽度:780px；}.照片1{不透明度:0；动画:fadeinphoto 7s 1；-moz 动画:fadeinphoto 7s 1；-webkit-animation:fadeinphoto 7s 1；-o-动画:fadeinphoto 7s 1；向左飘浮;位置:相对；顶部:0px；z-索引:1；}.photo2 {不透明度:0；动画:fadeinphoto 7s 5s 1；-moz-动画:fadeinphoto 7s 5s 1；-webkit-animation:fadeinphoto 7s 5s 1；-o-动画:fadeinphoto 7s 5s 1；向左飘浮;位置:相对；顶部:-400px；z-索引:1；}.photo3 {不透明度:0;动画:fadeinphoto 7s 10s 1；-moz-动画:fadeinphoto 7s 10s 1；-webkit-animation:fadeinphoto 7s 10s 1；-o-动画:fadeinphoto 7s 10s 1；向左飘浮;位置:相对；顶部:-800px；z-索引:1；}.photo4 {不透明度:0；动画:fadeinphoto 7s 15s 1；-moz-animation:fadeinphoto 7s 15s 1；-webkit-animation:fadeinphoto 7s 15s 1；-o-动画:fadeinphoto 7s 15s 1；向左飘浮;位置:相对；顶部:-1200px；z-索引:1；}.photo5 {不透明度:0；动画:fadeinphoto 7s 20s 1；-moz-动画:fadeinphoto 7s 20s 1；-webkit-animation:fadeinphoto 7s 20s 1；-o-动画:fadeinphoto 7s 20s 1；向左飘浮;位置:相对；顶部:-1600px；z-索引:1；}/* 动画关键帧*/@关键帧淡入淡出{0% { 不透明度:0;}50% { 不透明度:1;}100% { 不透明度:0;}}@-moz-keyframes 淡入照片 {0% { 不透明度:0;}50% { 不透明度:1;}A100% { 不透明度:0;}}@-webkit-keyframes 淡入照片 {0% { 不透明度:0;}50% { 不透明度:1;}100% { 不透明度:0;}}@-o-keyframes 淡入照片 {0% { 不透明度:0;}50% { 不透明度:1;}100% { 不透明度:0;}}</风格><身体><div class="内容"><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"/></html>
解决方案
添加此样式
animation-iteration-count:infinite;I want to have the whole set of animation to play forever. When the last photo fades off, I want the first one to appear again an so on. What I did (and I dont like) is set the page to reload at the end of the last photo fade out. Is there any other way to do this using 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>
解决方案
add this styles
animation-iteration-count:infinite;
这篇关于如何让css3动画永远循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
