How to have css3 animation to loop forever

Question

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      lt html gt       lt head gt           lt style gt   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               lt  style gt           lt body gt               lt div class  content  gt                   lt div class  imgholder  gt                       lt img src  images image1 jpg  width  780  height  400  class  photo1   gt                       lt img src  images image2 JPG  width  780  height  400  class  photo2   gt                       lt img src  images image3 JPG  width  780  height  400  class  photo3   gt                       lt img src  images image4 jpg  width  780  height  400  class  photo4   gt                       lt img src  images image5 jpg  width  780  height  400  class  photo5   gt                   lt  div gt               lt  div gt           lt  body gt       lt  head gt   lt  html gt

User · Answer

add this styles  animation-iteration-count infinite

User · Answer

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  lt head gt  section of your page    lt script gt  setInterval function    var container   document getElementById  content    var tmp   container innerHTML  container innerHTML  tmp     35000    length of the whole show in milliseconds     lt  script gt    BTW  the closing  lt  head gt  in your code is misplaced  it must be before the starting  lt body gt

User · Answer

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

[css] How to have css3 animation to loop forever

Examples related to css

Examples related to loops

Examples related to animation

Examples related to keyframe

Examples related to forever