Wie erstelle ich mit CSS3 eine nahtlose Schleifenanimation?

Nahtlose Schleife von CSS3-Animationen

Problem:

Sie möchten eine ununterbrochene Animation, die nahtlos vom letzten Frame zum letzten Frame übergeht Erstellen Sie zunächst eine Endlosschleife Wirkung.

Lösung:

1. Verwenden Sie die Eigenschaft „animation-iteration-count“:

Fügen Sie die folgende Eigenschaft zu Ihren Keyframes hinzu:

animation-iteration-count: infinite;

Diese Eigenschaft gibt an, wie oft die Animation wiederholt wird. Wenn Sie den Wert auf „Unendlich“ einstellen, wird die Animation auf unbestimmte Zeit wiederholt.

2. Überarbeiteter CSS-Code:

Hier ist der aktualisierte CSS-Code:

@keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-moz-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    A100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-webkit-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

@-o-keyframes fadeinphoto {
    0% { opacity: 0; }
    50% { opacity: 1; }
    100% { opacity: 0; }
    animation-iteration-count: infinite;
}

Erklärung:

Durch Angabe der Animation-Iteration-Count : unendlich, jedes Foto wird eingeblendet, bleibt für einen bestimmten Zeitraum sichtbar und wird dann ausgeblendet, um dann sanft zum ersten Foto zurückzukehren, wodurch ein Endlosbild entsteht Schleife.

Hinweis:

Stellen Sie sicher, dass Ihre Animation so gestaltet ist, dass die Deckkraft von 1 auf 0 (oder umgekehrt) übergeht, damit die Schleife nahtlos funktioniert.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit CSS3 eine nahtlose Schleifenanimation?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!