79

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>
Slipp D. Thompson
  • 33,165
  • 3
  • 43
  • 43
CuRSoR
  • 801
  • 1
  • 6
  • 3

3 Answers3

111

add this styles

animation-iteration-count: infinite;
John
  • 1
  • 13
  • 98
  • 177
Elad Shechter
  • 3,885
  • 1
  • 22
  • 22
  • 7
    Could also be mentioned that CuRSoR already defined the number of iterations in the shorthand: `animation: fadeinphoto 7s 20s 1;` The last number (1) is the number of iterations. Simply change this to `infinite`, or add the full CSS rule as suggested in Elads answer. – agrm May 04 '14 at 16:39
  • 2
    This will cause EACH animation to play forever. I would like to have all animations to play, one after another, and then repeat. If you noticed, the first photo appears immediately after the page loads, the second sarts with a delay of 5 secs, the third after a delay of 10 secs and so on. If I set the iteration of EACH one to infinite, it will cause the order of the photos to be messed up. Is there a way to "group" all the animations together and set the iteration of the whole group to infinite? – CuRSoR May 04 '14 at 17:37
  • you could add static keyframes to each such that all photos are essentially each looping a long animation, but effectively animating and then waiting for the others. – Adam Tolley May 30 '17 at 13:52
23

Whilst Elad's solution will work, you can also do it inline:

   -moz-animation: fadeinphoto 7s 20s infinite;
-webkit-animation: fadeinphoto 7s 20s infinite;
     -o-animation: fadeinphoto 7s 20s infinite;
        animation: fadeinphoto 7s 20s infinite;
Timo Tijhof
  • 10,032
  • 6
  • 34
  • 48
Mark Eriksson
  • 1,455
  • 10
  • 19
0

I stumbled upon the same problem: a page with many independent animations, each one with its own parameters, which must be repeated forever.

Merging this clue with this other clue I found an easy solution: after the end of all your animations the wrapping div is restored, forcing the animations to restart.

All you have to do is to add these few lines of Javascript, so easy they don't even need any external library, in the <head> section of your page:

<script>
setInterval(function(){
var container = document.getElementById('content');
var tmp = container.innerHTML;
container.innerHTML= tmp;
}, 35000 // length of the whole show in milliseconds
);
</script>

BTW, the closing </head> in your code is misplaced: it must be before the starting <body>.

Community
  • 1
  • 1
Marco Bernardini
  • 695
  • 6
  • 17
  • 2
    Sorry I'm not able to edit it. You should not add a semicolon after the interval (35000, in this case), otherwise it won't work. Thanks for the contribution. – Fernando May 18 '15 at 10:51
  • 2
    Don't use this one. This might result in a huge mess. E.g. you have to deal with reattaching attached event handlers and stuff alike. Plus the DOM gets adapted for no reason. In case you got external sources inside this snippet, they might actually get refetched each time you replay the animation! Instead just add the keyword `initite` like in the other answers. – Hafenkranich Oct 26 '16 at 19:02