CSS animation transition timing logic

HTML & CSS
, ,
1

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/

2

I think the simplest way is to create just one animation and set of keyframes.
Then you apply an animation-delay to each individual image to offset the timing.
This will save the trouble of having to create a new set of keyframes for each image.

2 Likes
3

I think its just a matter of setting the delay correctly and allowing a little overlap for the crossfade. The animation duration needs to be as long as all 3 (3 x 15 = 45s) and then in the keyframes you only show it for a third of the time.

Also you need to turn all images off to start with otherwise they display until the routine has run once.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
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}
}
</style>
</head>

<body>
<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>
</body>
</html>

2 Likes
5

Thank you very much with your answer. I have been tried your code but I still got from image 3 goes back to image 1 it have 15 seconds not 30 seconds. How will I make from image 3 to image 1 it needs 30 seconds ? From image 1 to image 2 and image 2 to image 3 it was correct in 15 seconds.

6

Could you give me some example with code please ?

7

Sorry, I missed that bit. I thought you wanted 15 second intervals (which would be logical).

If one is 30 seconds then you will need a separate animation for that one.

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

li {
  position: absolute;
	opacity:0;
}

li{animation: xfade 60s  infinite;}
li:nth-child(2) {animation-delay:15s;}
li:nth-child(3) {animation: xfade2 60s 30s infinite;}

@keyframes xfade{ 
  3%{opacity:1}
  25% {opacity:1;}
  27%{opacity:0}
}
@keyframes xfade2{ 
  3%{opacity:1}
  50% {opacity:1;}
  52%{opacity:0}
}
1 Like
8

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.