Wie erstelle ich CSS3-Animationen mit Endlosschleife?-CSS-Tutorial-php.cn

Wie erstelle ich CSS3-Animationen mit Endlosschleife?

Barbara Streisand

Freigeben： 2024-11-17 14:23:02

Original

469 Leute haben es durchsucht

How to Create Infinitely Looping CSS3 Animations?

CSS3-Animationen auf unbestimmte Zeit in einer Schleife wiedergeben

Beim Streben nach der Erstellung fesselnder Animationen verspüren Sie möglicherweise den Wunsch, sie für immer nahtlos in einer Schleife zu wiederholen. Das Neuladen der Seite am Ende eines Animationszyklus scheint zwar eine einfache Lösung zu sein, kann jedoch nicht ideal sein. Glücklicherweise gibt es eine elegante Möglichkeit, dies mit reinem CSS3 zu erreichen.

In Ihrem bereitgestellten Code wird jedes Bild über eine festgelegte Dauer ein- und ausgeblendet. Um diese Animation endlos zu machen, müssen wir die Eigenschaft „animation-iteration-count“ ändern. Diese Eigenschaft gibt an, wie oft eine Animation wiederholt werden soll.

animation-iteration-count: infinite;

Nach dem Login kopieren

Indem Sie die Anzahl der Animationsiterationen auf „unendlich“ setzen, wird die Animation auf unbestimmte Zeit wiederholt und stellt so sicher, dass Ihre Bilder kontinuierlich ein- und ausgeblendet werden.

Hier ist das aktualisierte CSS mit der hinzugefügten Eigenschaft:

@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

Jetzt werden Ihre Bilder auf unbestimmte Zeit ein- und ausgeblendet, wodurch eine nahtlose und optisch ansprechende Animationsschleife entsteht.

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