Wie kann ich in CSS3 eine Endlosschleifenanimation erstellen, bei der das erste Bild nahtlos eingeblendet wird, während das letzte Bild ausgeblendet wird?

Erstellen einer nahtlosen Schleifenanimation in CSS3

Problem:

Sie möchten eine unendliche Animationssequenz erstellen, bei der die erste Das Bild wird eingeblendet, wenn das letzte Bild ausgeblendet wird.

Vorausgesetzt Code:

Der bereitgestellte HTML- und CSS-Code erstellt eine Reihe von fünf Bildern, die nacheinander eingeblendet werden, aber sobald das letzte Bild erreicht ist, wird die Seite neu geladen.

Lösung verwenden animation-iteration-count:

Um eine Endlosschleife zu erreichen, ohne die Seite neu zu laden, fügen Sie der Animation die folgende Eigenschaft hinzu Regeln:

animation-iteration-count: infinite;

Diese Eigenschaft gibt an, wie oft die Animation wiederholt werden soll. Indem Sie es auf „unendlich“ setzen, stellen Sie sicher, dass die Animation auf unbestimmte Zeit läuft.

Aktualisiertes CSS:

/* 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; }
}

.photo1 {
    opacity: 0;
    animation: fadeinphoto 7s 1 infinite;
    -moz-animation: fadeinphoto 7s 1 infinite;
    -webkit-animation: fadeinphoto 7s 1 infinite;
    -o-animation: fadeinphoto 7s 1 infinite;
}

.photo2 {
    opacity: 0;
    animation: fadeinphoto 7s 5s infinite;
    -moz-animation: fadeinphoto 7s 5s infinite;
    -webkit-animation: fadeinphoto 7s 5s infinite;
    -o-animation: fadeinphoto 7s 5s infinite;
}

.photo3 {
    opacity: 0;
    animation: fadeinphoto 7s 10s infinite;
    -moz-animation: fadeinphoto 7s 10s infinite;
    -webkit-animation: fadeinphoto 7s 10s infinite;
    -o-animation: fadeinphoto 7s 10s infinite;
}

.photo4 {
    opacity: 0;
    animation: fadeinphoto 7s 15s infinite;
    -moz-animation: fadeinphoto 7s 15s infinite;
    -webkit-animation: fadeinphoto 7s 15s infinite;
    -o-animation: fadeinphoto 7s 15s infinite;
}

.photo5 {
    opacity: 0;
    animation: fadeinphoto 7s 20s infinite;
    -moz-animation: fadeinphoto 7s 20s infinite;
    -webkit-animation: fadeinphoto 7s 20s infinite;
    -o-animation: fadeinphoto 7s 20s infinite;
}

Mit dieser Änderung wird die Animationssequenz jetzt in einer Endlosschleife ausgeführt. Gewährleistung eines nahtlosen Übergangs vom letzten Bild zum ersten.

Das obige ist der detaillierte Inhalt vonWie kann ich in CSS3 eine Endlosschleifenanimation erstellen, bei der das erste Bild nahtlos eingeblendet wird, während das letzte Bild ausgeblendet wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!