Wie css3 Animation für immer Schleife

Ich möchte die ganze Reihe von Animationen für immer zu spielen haben. Wenn das letzte Foto ausblendet, möchte ich, dass das erste wieder erscheint. Was ich getan habe (und ich mag es nicht), ist die Seite, die am Ende des letzten Fotoausblends neu geladen werden soll. Gibt es eine andere Möglichkeit, dies mit CSS zu tun?Wie css3 Animation für immer Schleife

<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>

Quelle

2014-05-04 CuRSoR

verwenden, um die 'infinite' Schlüsselwort für' Animation-Iteration-count' –

diese Stile hinzufügen

animation-iteration-count:infinite;

Quelle

2014-05-04 16:28:21

auch schon erwähnt werden könnte, dass CURSOR die Anzahl der Iterationen definiert In der Kurzschrift: 'animation: fadeinphoto 7s 20s 1;' Die letzte Zahl (1) ist die Anzahl der Iterationen. Ändern Sie dies einfach in "unendlich" oder fügen Sie die vollständige CSS-Regel wie in Elads-Antwort vorgeschlagen hinzu. – agrm

Dadurch wird JEDE Animation für immer abgespielt. Ich möchte alle Animationen nacheinander abspielen lassen und dann wiederholen. Wenn Sie es bemerkt haben, erscheint das erste Foto sofort nach dem Laden der Seite, das zweite Foto mit einer Verzögerung von 5 Sekunden, das dritte Foto mit einer Verzögerung von 10 Sekunden und so weiter. Wenn ich die Iteration von EACH auf unendlich stelle, wird die Reihenfolge der Fotos durcheinander gebracht. Gibt es eine Möglichkeit, alle Animationen zusammen zu gruppieren und die Iteration der gesamten Gruppe auf unendlich zu setzen? – CuRSoR

können Sie statische Keyframes hinzufügen, so dass alle Fotos im Wesentlichen jeweils eine lange Animation durchlaufen, aber effektiv animieren und dann auf die anderen warten. –

ich auf das gleiche Problem gestoßen: eine Seite mit vielen unabhängigen Animationen, jede mit ihren eigenen Parametern, die für immer zu wiederholen.

Zusammenführen this clue mit this other clue Ich fand eine einfache Lösung: nach dem Ende aller Ihrer Animationen wird die Verpackung div wiederhergestellt, wodurch die Animationen neu gestartet werden.

Alles, was Sie tun müssen, ist, diese paar Zeilen Javascript hinzufügen, so einfach sie nicht einmal eine externe Bibliothek benötigen, im <head> Abschnitt Ihrer Seite:

<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, die Schließung </head> in Ihrem Code ist falsch platziert: es muss vor dem Start sein <body>.

Quelle

2015-04-06 06:09:32

Tut mir leid, ich kann es nicht bearbeiten. Sie sollten nach dem Intervall kein Semikolon hinzufügen (in diesem Fall 35000), sonst funktioniert es nicht. Danke für den Beitrag. – Fernando

@Fernando Danke für die Korrektur meines Fehlers. –

Diesen nicht verwenden. Dies könnte zu einer großen Unordnung führen. Z.B. Sie müssen sich damit befassen, angefügte Event-Handler und ähnliches wieder anzuhängen. Außerdem wird das DOM grundlos angepasst. Falls Sie innerhalb dieses Snippets externe Quellen haben, werden diese möglicherweise jedes Mal erneut abgerufen, wenn Sie die Animation erneut abspielen! Fügen Sie stattdessen einfach das Schlüsselwort "initiite" wie in den anderen Antworten hinzu. – Hafenkranich

Während Lösung des Elad funktioniert, können Sie es auch inline:

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

Quelle

2015-06-22 04:49:41

Antwort

Verwandte Themen