Menu
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> 
253
To create infinite animations in CSS, we will use the property animation-iteration-count: infinite;.
add this styles
animation-iteration-count: infinite; If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
