Wie kann ich in CSS3 eine Endlosschleifenanimation erstellen, bei der das erste Bild nahtlos eingeblendet wird, während das letzte Bild ausgeblendet wird?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-11-19 10:11:02

Original

483 Leute haben es durchsucht

How can I create a continuous looping animation in CSS3 where the first image seamlessly fades in as the last image fades out?

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;

Nach dem Login kopieren

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

Nach dem Login kopieren

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!