CSS animation delay and keyframe

Question

I have a problem with animation delay in CSS animations. I have 3 images and I want to do this slide show. Illustrations: image 1 to image 2 takes 15 seconds, and image 2 to image 3 takes 15 seconds, and image 3 returns to image 1, and after the first cycle - 30 seconds, I want to make a slide show in image 3, so the image 1 to image 2 for another 15 seconds, and image 2 to image 3 for another 15 seconds, and when loading image 3 there is no need to return to image 1. I tried this code, but it gives me a 15 second delay for all images. This is my 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> 

I want to delay my animation according to the above illustrations. Can anyone help me solve this problem? Thank you before.

Answer 1

I think using GreenSock is better if you want animation with a script like this.

Here is the closest I can get with HTML and CSS, I also need to duplicate <li> according to your scenario.

 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

Here is something that provided real food for thought :)

I had to apply 2 animations to change the opacity: xfade-25pct and xfade-50pct . Both play only 2 times, gradually disappearing after 25% and 50% of the animation. And additional show animation to make the 3rd image a stick after 2 animation cycles, with the necessary animation-fill-mode: forwards; .

The trick to opacity is this: you need to divide the animation into 4 quarters. If you want, you can change the overall duration of the animation from 60s to a multiple of 4 and adjust the delay. The third delay in the animation is the double 2nd.

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

Feel free to ask. Hope this helps you.

 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>