Comment avoir l’animation css3 en boucle pour toujours

Je veux avoir l’ensemble de l’animation à jouer pour toujours. Lorsque la dernière photo disparaît, je veux que le premier apparaisse à nouveau. Ce que j’ai fait (et je n’aime pas), c’est de mettre la page à recharger à la fin du dernier fondu de la photo. Y at-il un autre moyen de faire cela en utilisant css ???

   .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; } }   

    ajoutez ce style

     animation-iteration-count:infinite; 

    Alors que la solution d’Elad fonctionnera, vous pouvez également le faire en ligne:

      -moz-animation: fadeinphoto 7s 20s infinite; -webkit-animation: fadeinphoto 7s 20s infinite; -o-animation: fadeinphoto 7s 20s infinite; animation: fadeinphoto 7s 20s infinite; 

    Je suis tombé sur le même problème: une page avec de nombreuses animations indépendantes, chacune avec ses propres parameters, qui doivent être répétés pour toujours.

    En fusionnant cet indice avec cet autre indice, j’ai trouvé une solution simple: à la fin de toutes vos animations, le div enveloppant est restauré, ce qui oblige les animations à redémarrer.

    Tout ce que vous avez à faire est d’append ces quelques lignes de Javascript, si faciles qu’elles n’ont même pas besoin de bibliothèque externe, dans la section de votre page:

      

    BTW, la fermeture dans votre code est mal placée: il doit être avant le .