Css animation displaying 3 images simultaneously

Question

I am trying to show 3 images (out of 12) at the same time using css animation. I would like to display the image 1-3 first, then 4-6, then 7-9, and then 10-12.

I still have this, but I can’t figure out how to use the: nth selector to display the next 3, hiding the rest.

This is more or less what I still have:

#crossfade > img { max-width: 30%; height: auto; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; animation: imageAnimation 30s linear infinite 0s; } #crossfade > img:nth-child(n+3) { animation-delay: 6s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } 

Example below [ or click here for jsfiddle ]

 #crossfade { height: 185px; width: 100%; position: relative; } #crossfade > img { max-width: 30%; height: auto; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 30s linear infinite 0s; -moz-animation: imageAnimation 30s linear infinite 0s; -o-animation: imageAnimation 30s linear infinite 0s; -ms-animation: imageAnimation 30s linear infinite 0s; animation: imageAnimation 30s linear infinite 0s; } #crossfade > img:nth-child(n+3) { -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } #crossfade > img:nth-child(n+3) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } #crossfade > img:nth-child(4) { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } #crossfade > img:nth-child(5) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } 

 <div id="crossfade"> <img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1"> <img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4"> <img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5"> <img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6"> <img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7"> <img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8"> <img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9"> <img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10"> <img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11"> <img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12"> </div> 

Answer 1

I understand that this has already been answered, but here is my jQuery solution if it helps anyone in the future.

I commented heavily on JavaScript code, so it should be clear, but effectively you provide a function with the number of img / slides displayed and how to display them quickly, and everything else. Its dynamics will be tuned to an odd number of slides, etc.

Hope this helps someone :)

http://jsfiddle.net/BradChelly/qjtcojfc/3/

 function slideShow(currentSlide){ // speed at which the slides change in miliseconds (1000 = 1sec) // must not exceed total time for the fade in/out animations var duration = 3000; // how many slides to show at a time? var slidesPerShow = 3; // count the number of slides (imgs) slideCount = $( "#slideshow_images" ).children().length; // Array of next slides to be displayed slidesToShow = []; // add the defined number of slides "slidesPerShow" to the slidesToShow array var times = slidesPerShow; for(var i=0; i < times; i++){ slidesToShow.push(currentSlide+i+1); } // set slides array slides = []; // add each slide to the slides array $.each( slidesToShow, function( i, val ) { slide = $( "#slideshow_images img:nth-child(" + val + ")" ).clone(); slides.push(slide); }); // provided the current slideshow is not empty // fade out its contents, replace it with new slides and fade back in. if ( $("#slideshow").children().length > 0 ) { $("#slideshow").children().fadeOut("slow", function(){ $("#slideshow").empty().append(slides) $("#slideshow").children().fadeIn(1000); }); } // otherwise, if the current slideshow is empty // just load the slides straight away. else { $("#slideshow").append(slides); $("#slideshow").children().fadeIn(1000); } // set the current slide to the last slide shown or 0 if max slide count reached slidesToShow[(slidesPerShow-1)] >= slideCount ? currentSlide = 0 : currentSlide = slidesToShow[(slidesPerShow-1)]; // repeat after set time (set the duration at the top of function) setTimeout( function(){ slideShow(currentSlide); } , duration ); } // call the slideshow slideShow(0); 

 #slideshow img {display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="crossfade"> <div id="slideshow_images" style="display:none;"> <img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1"> <img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4"> <img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5"> <img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6"> <img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7"> <img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8"> <img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9"> <img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10"> <img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11"> <img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12"> <img src="http://dummyimage.com/120x185&text=Img 13" alt="Image 13"> <img src="http://dummyimage.com/120x185&text=Img 14" alt="Image 14"> </div> <div id="slideshow"></div> </div> 

Answer 2

 #crossfade { height: 185px; width: 100%; position: relative; } #crossfade > img { max-width: 30%; height: auto; opacity: 0; z-index: 0; animation: imageAnimation 30s linear infinite 0s; } #crossfade > img:nth-child(0):nth-child(-n+4) { animation-delay: 6s; } #crossfade > img:nth-child(n+4):nth-child(-n+7) { animation-delay: 12s; } #crossfade > img:nth-child(n+7):nth-child(-n+10) { animation-delay: 18s; } #crossfade > img:nth-child(n+10):nth-child(-n+13) { animation-delay: 24s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } 

 <div id="crossfade"> <img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1"> <img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4"> <img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5"> <img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6"> <img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7"> <img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8"> <img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9"> <img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10"> <img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11"> <img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12"> </div> 

The main part that you are missing is that the selector should be Xn+Y

If I understood correctly, you need something like this jsfiddle (all divided by 10 all the time for debugging)

EDIT:

Given all the comments, this new jsfiddle with the format n+X to -n+Y

Answer 3

I try a lot. But finally, I reached "1", "2-3", "4-6", "6-9", "10-12" .

 #crossfade > img { max-width: 30%; height: auto; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 30s linear infinite 0s; -moz-animation: imageAnimation 30s linear infinite 0s; -o-animation: imageAnimation 30s linear infinite 0s; -ms-animation: imageAnimation 30s linear infinite 0s; animation: imageAnimation 30s linear infinite 0s; } #crossfade > img:nth-child(-n+12) ~ img:nth-child(-n+9) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } #crossfade > img:nth-child(-n+9) ~ img:nth-child(-n+6) { -webkit-animation-delay: 18s; -moz-animation-delay: 18s; -o-animation-delay: 18s; -ms-animation-delay: 18s; animation-delay: 18s; } #crossfade > img:nth-child(-n+6) ~ img:nth-child(-n+3) { -webkit-animation-delay: 12s; -moz-animation-delay: 12s; -o-animation-delay: 12s; -ms-animation-delay: 12s; animation-delay: 12s; } #crossfade > img:nth-child(-n+3){ -webkit-animation-delay: 6s; -moz-animation-delay: 6s; -o-animation-delay: 6s; -ms-animation-delay: 6s; animation-delay: 6s; } @keyframes imageAnimation { 0% { opacity: 0; animation-timing-function: ease-in; } 8% { opacity: 1; animation-timing-function: ease-out; } 17% { opacity: 1 } 25% { opacity: 0 } 100% { opacity: 0 } } 

 <div id="crossfade"> <img src="http://dummyimage.com/120x185&text=Img 1" alt="Image 1"> <img src="http://dummyimage.com/120x185&text=Img 2" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 3" alt="Image 2"> <img src="http://dummyimage.com/120x185&text=Img 4" alt="Image 4"> <img src="http://dummyimage.com/120x185&text=Img 5" alt="Image 5"> <img src="http://dummyimage.com/120x185&text=Img 6" alt="Image 6"> <img src="http://dummyimage.com/120x185&text=Img 7" alt="Image 7"> <img src="http://dummyimage.com/120x185&text=Img 8" alt="Image 8"> <img src="http://dummyimage.com/120x185&text=Img 9" alt="Image 9"> <img src="http://dummyimage.com/120x185&text=Img 10" alt="Image 10"> <img src="http://dummyimage.com/120x185&text=Img 11" alt="Image 11"> <img src="http://dummyimage.com/120x185&text=Img 12" alt="Image 12"> </div>