web-dev-qa-db-fra.com

Comment avoir une animation CSS3 à boucler pour toujours

Je veux avoir toute l'animation pour jouer pour toujours. Lorsque la dernière photo s'estompe, je souhaite que la première apparaisse à nouveau, etc. Ce que j'ai fait (et que je n'aime pas), c'est de définir la page à recharger à la fin de la dernière photo. Existe-t-il un autre moyen de faire cela en utilisant 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>
cssloopsanimationkeyframeforever
49
CuRSoR

ajouter ce styles

animation-iteration-count:infinite;
68
Elad Shechter

Bien que la solution d'Elad fonctionne, 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;
14
Mark Eriksson

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

Fusion de cet indice avec cet autre indice J'ai trouvé une solution simple: après la fin de toutes vos animations, le wrapping div est restauré, ce qui force le redémarrage des animations. .

Tout ce que vous avez à faire est d’ajouter ces quelques lignes de Javascript, si faciles qu’elles n’ont même pas besoin de bibliothèque externe, dans le <head> section de votre 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, la clôture </head> _ dans votre code est mal placé: il doit être avant le début <body>.

1
Marco Bernardini