CSS animation transition - html

Question

I have some problem with my animation transition time logic in my css. I have 3 images which have to slideshow. I want to change the image from image1 to image2 in 15 seconds and form image2 to image3 in 15 seconds and the go back from image 3 to image 1 in 30 seconds. I don't know how to do that with my css animation timing logic.
This is my code in html :
<ul>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg"></li>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg"></li>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg"></li>
</ul>
And this is my css :
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
position: absolute;
}
li:nth-child(3) {
animation: xfade 15s 4s infinite;
}
li:nth-child(2) {
animation: xfade 15s 8s infinite;
}
li:nth-child(1) {
animation: xfade 15s 12s infinite;
}
#keyframes xfade{
17% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
}
I create the jsfidle so everybody can make some test in this case. https://jsfiddle.net/ag0hLhnj/1/

Answer 1

Infinite animations can't have a delay between cycles. Which means the only way to delay the timing is by buffering it within the animation (making the later animations longer and having a delay built into the animation itself).
While this is technically doable with css, it's not going to scale well. That said, there's an excellent example of just that on one of your other questions: CSS Animation Delay and Keyframe
Instead, you may want to control the loop with jquery.
(function($){ // Closure to avoid jQuery conflicts
$(window).load(function() { //start after HTML, images have loaded
var itemInterval = 2500;
var InfiniteRotator =
{
init: function()
{
var initialFadeIn = 0; //initial fade-in time (in milliseconds)
var fadeTime = 2500; //cross-fade time (in milliseconds)
var numberOfItems = 3; //count number of items
var currentItem = 0; //set current item
//show first item
$('ul li').eq(currentItem).addClass('current-item'); // Can Add a Class With CSS Rules
// $('ul li').eq(currentItem).fadeIn(fadeTime); // Or Can Fade-in using jQuery
//loop through the items
var infiniteLoop = setInterval(function(){
if(currentItem == numberOfItems -1){
currentItem = 0;
}else{
currentItem++;
}
$('ul li').removeClass('current-item');
$('ul li').eq(currentItem).addClass('current-item');
}, itemInterval);
}
};
InfiniteRotator.init();
});
})(jQuery);
ul {
list-style: none;
margin: 0;
padding: 0;
position: relative;
}
li {
position: absolute;
display:none;
}
li.current-item {
display:inline-block;
}
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
<ul>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Ford-GT90_Concept_1995_800x600_wallpaper_01.jpg"></li>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Mercedes-Benz-SLR_McLaren_2004_800x600_wallpaper_02.jpg"></li>
<li><img width="500" height="500" src="http://img2.netcarshow.com/Porsche-911_Carrera_4S_2002_800x600_wallpaper_0d.jpg"></li>
</ul>