CSS-Animation Verzögerung und Keyframe

Question

Ich habe ein Problem mit der Animation Verzögerung auf CSS-Animation. Ich habe 3 Bilder und möchte eine Diashow erstellen. Die Illustrationen sind, Bild 1 bis Bild 2 dauert 15 Sekunden, um zu ändern und Bild 2 bis Bild 3 dauert 15 Sekunden zum Ändern und Bild 3 zurück zu Bild 1 es dauert 30 Sekunden, nach der ersten Schleife möchte ich die Diashow beenden Bild 3 also Bild 1 bis Bild 2 noch 15 Sekunden und Bild 2 bis Bild 3 noch 15 Sekunden und wenn Bild 3 geladen ist, muss ich nicht zurück zum Bild 1. Ich habe diesen Code ausprobiert, aber er gibt mir 15 Sekunden Verzögerung für alle Bilder. Dies ist mein Code:

ul { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
    } 
 
    
 
    li { 
 
     position: absolute; 
 
     opacity:0; 
 
    } 
 
    
 
    li { 
 
     animation: xfade 45s infinite; 
 
    } 
 
    li:nth-child(2) { 
 
     animation-delay:15s; 
 
    } 
 
    li:nth-child(3) { 
 
     animation-delay:30s; 
 
    } 
 
    
 
    @keyframes xfade{ 
 
     3%{opacity:1} 
 
     33% {opacity:1;} 
 
     36%{opacity:0} 
 
    }

<ul> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li><img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 
    </ul>

ich Verzögerung meiner Animation nach den Abbildungen oben machen wollen. Jeder könnte mir helfen, dieses Problem zu lösen? Danke schonmal.

Answer 1

Ich denke, dass die Verwendung von GreenSock ist besser, wenn Sie Animation mit bestimmten Szenario wie folgt wünschen.

Hier ist die nächste, die ich mit HTML und CSS bekommen, muss ich auch die <li> duplizieren Ihr Szenario zu passen.

ul { 
 
     list-style: none; 
 
     margin: 0; 
 
     padding: 0; 
 
     position: relative; 
 
    } 
 
    
 
    li { 
 
     position: absolute; 
 
     opacity: 0; 
 
    } 
 
    
 
    li:nth-child(6) { 
 
     /*The last item always on the top, direction will goes from last to first*/ 
 
     animation: xfade 15s; 
 
    } 
 
    li:nth-child(5) { 
 
     /*Put animation length double the delay (in this case delay is the actual animation length)*/ 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(4) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(3) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(2) { 
 
     animation: xfade 30s 15s; 
 
    } 
 
    li:nth-child(1) { 
 
     opacity: 1; 
 
    } 
 
    
 
    @keyframes xfade{ 
 
     0%{opacity:0} 
 
     33% {opacity:1;} 
 
     100%{opacity:0} 
 
    }

<ul> 
 
     <li>1<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li>2<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li>3<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 

 
     <!-- Duplicate --> 
 
     <li>4<img width="500" height="500" src="http://lorempixel.com/500/500/sports" alt="pic1"></li> 
 
     <li>5<img width="500" height="500" src="http://lorempixel.com/500/500/people" alt="pic2"></li> 
 
     <li>6<img width="500" height="500" src="http://lorempixel.com/500/500/transport" alt="pic3"></li> 
 
    </ul>

Answer 2

Hier ist etwas, das wirklich eine Speise zum Nachdenken gab :)

I 2 Animationen für Opazitätsveränderung anzuwenden hatte: xfade-25pct und xfade-50pct. Beide spielen nur 2 mal und klingen nach 25% und 50% der Animation kurz aus. Und eine zusätzliche show Animation, um das 3. Bild nach 2 Animationsschleifen zu halten, mit der notwendigen Regel animation-fill-mode: forwards;.

Der Trick zur Deckkraft ist das: Sie müssen die Animation in 4 Viertel teilen. Wenn Sie möchten, können Sie die Gesamtdauer der Animation von 60s zu einem Vielfachen von 4 ändern und die Verzögerungen anpassen. Die 3. Animationsverzögerung ist das Doppelte der 2. Animation.

----#----#----#----#----#----#----#----#----#----# 
1st animation  | 1st animation  | 
-------------------------------------------------- 
15s | 2nd animation  | 2nd animation  | 
-------------------------------------------------- 
30s  | 3rd animation  | 3rd animation | 
----#----#----#----#----#----#----#----#----#----# 

Fühlen Sie sich frei zu fragen. Hoffe das hilft dir.

var s = 0, 
 
    c = 1; 
 
/* Code for displaying timer */ 
 
window.setInterval(function() { 
 
    s++; 
 
    document.querySelector('DIV').innerHTML = s; 
 
    if (s == 15 && c <= 2 || s == 30) { 
 
    if (s == 30) { 
 
     c = 1; 
 
    } else { 
 
     c++; 
 
    } 
 
    s = 0; 
 
    } 
 
}, 1000);

ul { 
 
    list-style: none; 
 
    margin: 0; 
 
    padding: 0; 
 
    position: relative; 
 
} 
 

 
li { 
 
    position: absolute; 
 
    opacity: 0; 
 
} 
 

 
li { 
 
    animation: xfade-25pct 60s 2; 
 
} 
 

 
li:nth-child(2) { 
 
    animation-delay: 15s; 
 
} 
 

 
li:nth-child(3) { 
 
    animation-delay: 30s, 120s; 
 
    animation-name: xfade-50pct, show; 
 
    animation-duration: 60s, 1s; 
 
    animation-iteration-count: 2, 1; 
 
    animation-fill-mode: forwards; 
 
} 
 

 
@keyframes xfade-25pct { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2%, 
 
    25% { 
 
    opacity: 1; 
 
    } 
 
    27% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes xfade-50pct { 
 
    0% { 
 
    opacity: 0; 
 
    } 
 
    2%, 
 
    50% { 
 
    opacity: 1; 
 
    } 
 
    52% { 
 
    opacity: 0; 
 
    } 
 
} 
 

 
@keyframes show { 
 
    0%, 
 
    100% { 
 
    opacity: 1; 
 
    } 
 
}

<DIV></DIV> 
 
<ul> 
 
    <li><img width="500" height="500" src="https://www.noao.edu/image_gallery/images/d2/pelican_500.jpg" alt="pic1"></li> 
 
    <li><img width="500" height="500" src="http://whc.unesco.org/uploads/thumbs/news_920-500-500-20151015155516.jpg" alt="pic2"></li> 
 
    <li><img width="500" height="500" src="https://i.pinimg.com/736x/4c/17/65/4c176537aee906de294138c3bac5b8f5--merry-christmas-love-coffee-aroma.jpg" alt="pic3"></li> 
 
</ul>