Search code examples
htmlcsscross-fade

CSS crossfade animation

I created a crossfade using CSS, but I am having difficulties with the timing. I want 4 seconds delay or 4 seconds between each image but it's not working.

#cf {
  position:absolute;
  margin:0 auto;
    width: 100%;
    height: 100%;
    top: 0;
}

#cf img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
    z-index: -1;
}

@-webkit-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-moz-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@-o-keyframes cf4FadeInOut {
 0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

@keyframes cf3FadeInOut {
  0% {
  opacity:1;
}
15% {
opacity:1;
}
55% {
opacity:0;
}
100% {
opacity:0;
}
}

#cf img {
  animation-name: cf3FadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-duration: 4s;
animation-direction: alternate;
}

#cf img:nth-of-type(1) { /* Wakame */
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  animation-delay: 24s;
}
#cf img:nth-of-type(2) { /*Meraki */
  -webkit-animation-delay: 20s;
  -moz-animation-delay: 20s;
  -o-animation-delay: 20s;
  animation-delay: 20s;
}
#cf img:nth-of-type(3) { /* Trabzoni */
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
#cf img:nth-of-type(4) { /* SPS */
  -webkit-animation-delay: 12s;
  -moz-animation-delay: 12s;
  -o-animation-delay: 12s;
  animation-delay: 12s;
}

#cf img:nth-of-type(5) { /* Balad */
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  animation-delay: 8s;
}

#cf img:nth-of-type(6) { /* Wesal */
  -webkit-animation-delay: 4s;
  -moz-animation-delay: 4s;
  -o-animation-delay: 4s;
  animation-delay: 4s;
}
<div id="cf">
   <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
   <img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
   <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
   <img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
   <img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
   <img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
   </div>

Also, besides the timing, when the images crossfade, after the second image, it keeps going back to the first while the rest won't display or very quickly display and fade.

Solution

  • I want 4 seconds delay or 4 seconds between each image but it's not working

    In order to get the timing right, you need to keep in mind some calculations.

    1. Determine how long each image should take to fade in. Let's say you want 1 second for the image to fade in from 0 opacity to 1.
    2. Determine how long each image should remain visible. Let's say you want the image to stay at 1 opacity for 4 seconds.
    3. Determine how long should the next image take to start. This will become the interval between the two images. This should be greater than what you got at step #2. You had 1s to show up, and 4s to keep it shown. So this would be at least 5 seconds. Apply this in increments to each image's animation-delay.
    4. Multiply this number by the total number of your images. This will become to total animation-duration. In this case, you calculate 5s in step #3 and you have 6 images. So your animation-duration will be 5 x 6 = 30 i.e 30 seconds.
    5. Divide 100% by the number you got in step #4. This will become the keyframes. In this case, you have 30s of total animation-duration. So your keyframes will be in steps of 100% / 30 = 3.33 i.e 3.33% of each keyframe. This each frame will represent 1 second.
    6. Extrapolate your step #1 and #2 values on these frames. i.e. for 3.33% you will have opacity: 1 to show the image after 1 second. Then for each of 6.66%, 9.99%, and 13.33% it will remain as opacity:1. i.e. for 4 seconds starting at 0, the image will remain visible. Then on frame 16.65 revert the opacity back to 0. i.e. at 5th second the image will fade out. And then shall remain hidden until 100% i.e. until all remaining 25 seconds.

    Putting this all together, you get:

    From Step #3:

    #cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }

    From Step #4:

    #cf img { animation: fader 30s linear infinite; }

    And, from Steps #5 and #6 (extrapolated from steps #1 and #2):

    @keyframes fader {
    0% { opacity: 0; } 
    03.33% { opacity: 1; }
    06.66% { opacity: 1; }
    09.99% { opacity: 1; }
    13.33% { opacity: 1; }
    16.65% { opacity: 0; }
    100% { opacity: 0; }
}

    That's it. Here is the complete snippet:

    Snippet:

    html, body { height: 100%; width: 100%; overflow: hidden; }
#cf {
  position: relative; margin: 0 auto; 
  width: 100%; height: 100%;
}
#cf img { 
  position: absolute; left: 0; top: 0; opacity: 0; 
  animation: fader 30s linear infinite;
}

#cf img:nth-child(1) { animation-delay: 0s; }
#cf img:nth-child(2) { animation-delay: 5s; }
#cf img:nth-child(3) { animation-delay: 10s; }
#cf img:nth-child(4) { animation-delay: 15s; }
#cf img:nth-child(5) { animation-delay: 20s; }
#cf img:nth-child(6) { animation-delay: 25s; }

@keyframes fader {
  0% { opacity: 0; } 
  03.33% { opacity: 1; }
  06.66% { opacity: 1; }
  09.99% { opacity: 1; }
  13.33% { opacity: 1; }
  16.65% { opacity: 0; }
  100% { opacity: 0; }
}
    <div id="cf">
  <img class="img-responsive" src="http://ddragon.leagueoflegends.com/cdn/img/champion/splash/Ezreal_0.jpg" />
  <img class="img-responsive" src="http://vignette2.wikia.nocookie.net/leagueoflegends/images/6/6b/Ezreal_NottinghamSkin.jpg/revision/latest?cb=20160518164441" />
  <img class="img-responsive" src="https://s-media-cache-ak0.pinimg.com/originals/a3/99/59/a399593448b739ee3cb164f74f22d89a.jpg" />
  <img class="img-responsive" src="https://i.ytimg.com/vi/nOmafJzhUrk/maxresdefault.jpg" />
  <img class="img-responsive" src="http://art-of-lol.com/wp-content/uploads/2015/12/ezreal_by_cglas-d8smd2g.jpg" />
  <img class="img-responsive" src="http://pre14.deviantart.net/81ae/th/pre/i/2015/345/5/c/ezreal_by_tanzenkat-d9jrcvc.jpg" />
</div>