Cross-Fade Between Images with CSS in Loop

Cross-Fade between images with CSS in loop

I have taken your fiddle as a base, and made it work without script.

updated demo

I needed to set an id to the HTML

.fadein img {
    position:absolute;
    top:0;
    -webkit-animation-name: fade;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-duration: 6s;
    animation-name: fade;
    animation-iteration-count: infinite;
    animation-duration: 6s;
}

@-webkit-keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}
@keyframes fade {
    0% {opacity: 0;}
    20% {opacity: 1;}
    33% {opacity: 1;}
    53% {opacity: 0;}
    100% {opacity: 0;}
}

#f1 {
    background-color: lightblue;
}
#f2 {
    -webkit-animation-delay: -4s;
    background-color: yellow;
}
#f3 {
    -webkit-animation-delay: -2s;
    background-color: lightgreen;
}

<div class="fadein">
    <img id="f3" src="http://i.imgur.com/R7A9JXc.png">
    <img id="f2" src="http://i.imgur.com/D5yaJeW.png">
    <img id="f1" src="http://i.imgur.com/EUqZ1Er.png">
</div>

Crossfading between multiple images CSS

You are close to the correct solution. animation-direction: alternate; causes the animation to "run backwards" once it reached 100%. With the odd times defined in your keyframe, this leads to uneven transitions:

keyframe        0% 17% 25%  92%   100%  92% 25% 17%  0% 17% ... infinite
state          :1   1   0    0     1     0   0   1   1   1
time in state  :   17%      62%    0%       62%         34%
transition time:        8%      8%       8%      8%

Simplify the keyframe to even times and you should be fine. With an even time distribution you don't even need the animation-direction at all. You can easily adjust the times by changing animation-duration of the keyframe and animation-delay for your images.

#cf img {    animation-name: cf3FadeInOut;    animation-timing-function: ease-in-out;/* if you only want to cycle a finite amount of times,    simply change 'infinite' with # of iterations you need */    animation-iteration-count: infinite;     animation-duration: 6s;    animation-direction: alternate; /* not strictly necessary */    position:absolute;}
#cf img:nth-of-type(1) {    animation-delay: 5s;}
#cf img:nth-of-type(2) {    animation-delay: 3s;}
#cf img:nth-of-type(3) {    /* add some delay for the first picture as well */    animation-delay: 1s;}
@keyframes cf3FadeInOut {    /* distributing times evenly */    0% {        opacity: 1;    }    25% {        opacity: 0;    }    75% {        opacity: 0;    }    100% {        opacity: 1;    }}

<div id="cf">  <img class="bottom" src="http://lorempixel.com/200/100/sports/1" />  <img class="top" src="http://lorempixel.com/200/100/sports/2" />  <img class="bottom" src="http://lorempixel.com/200/100/sports/3"></div>

Cross-fade between two images on page load then stop

You can crossfade between two images by positioning them in the same place using CSS, then calling fadeIn() and fadeOut() using jQuery.

For example:

$(function() {
    $('img.OldImage').fadeOut();
    $('img.NewImage').fadeIn();
});

Pure CSS crossfade gallery with any number of pictures

You can get this using only CSS, using a content responsive technique

Let's set a time for each slide of 2 seconds.

We need to set a staggered delay for every nth child of 2 seconds. That is easily acieved with nth-child.

Now, we need to increase the duration of the transition depending on the number of elements. Using this technique we achieve this easily.

The third issue is managing the fade-out. In the standard approach, that would involve changing the keyframes changing point, and it would be cumbersome. The trick to get this working with much less code, is to make a z-index movement in the animation itself. The elements are moving backward, and then we don't care about their opacity anymore

Example set only for 3 posible number of elements:

.container {  width: 100px;  height: 50px;  position: relative;  margin: 10px;  display: inline-block;}
.element {  position: absolute;  width: 100%;  height: 100%;  opacity: 0;  animation: anim 6s infinite;}

.element:nth-child(1) {  background-color: lightyellow;  animation-delay: 0s;}
.element:nth-child(2) {  background-color: lightgreen;  animation-delay: 2s;}.element:nth-child(3) {  background-color: pink;  animation-delay: 4s;}.element:nth-child(4) {  background-color: lightblue;  animation-delay: 6s;}.element:nth-child(5) {  background-color: coral;  animation-delay: 8s;}.element:nth-child(6) {  background-color: aliceblue;  animation-delay: 10s;}.element:nth-child(7) {  background-color: burlywood;  animation-delay: 12s;}.element:nth-child(8) {  background-color: bisque;  animation-delay: 14s;}.element:nth-child(9) {  background-color: beige;  animation-delay: 16s;}
.element:nth-last-child(3):first-child, .element:nth-last-child(3):first-child ~ .element {  animation-duration: 6s;}
.element:nth-last-child(6):first-child, .element:nth-last-child(6):first-child ~ .element {  animation-duration: 12s;}
.element:nth-last-child(9):first-child, .element:nth-last-child(9):first-child ~ .element {  animation-duration: 18s;}
@keyframes anim {  0% { opacity: 0; z-index: 100;}  15% { opacity: 1;}  50% { opacity: 1;}  100% { opacity: 0; z-index: 1;}}

<div class="container">    <div class="element">ONE</div>    <div class="element">TWO</div>    <div class="element">THREE</div></div><div class="container">    <div class="element">ONE</div>    <div class="element">TWO</div>    <div class="element">THREE</div>    <div class="element">FOUR</div>    <div class="element">FIVE</div>    <div class="element">SIX</div></div><div class="container">    <div class="element">ONE</div>    <div class="element">TWO</div>    <div class="element">THREE</div>    <div class="element">FOUR</div>    <div class="element">FIVE</div>    <div class="element">SIX</div>    <div class="element">SEVEN</div>    <div class="element">EIGHT</div>    <div class="element">NINE</div></div>

jQuery cross fading two images on a loop!

Edit 2+ years later: There are better ways to do this... so ignore this answer.

I would try a combination of callbacks and setTimeout. (I'm going to build on Kobi's response, since he posted while I was typing.)

In CSS, give both images a "display: none;" instead of setting them to hidden at the beginning in jQuery. Then in jQuery:

function imageOneFade(){
  $('#img1').fadeIn(2000, function(){ setTimeout("$('#img1').fadeOut(2000); imageTwoFade();",6000); });
}

function imageTwoFade(){
  $('#img2').fadeIn(2000, function(){ setTimeout("$('#img2').fadeOut(2000); imageOneFade();",6000); });
}

$(document).ready(function(){
   imageOneFade();
});

Hopefully something like that you work.

The setTimeout function takes two parameters.

setTimeout(WHAT WILL HAPPEN, HOW LONG TO WAIT)

And the fadeIn/Out functions can have a second parameter that will trigger when the effect is finished.

Cross-fade between two images on page load then stop

You can crossfade between two images by positioning them in the same place using CSS, then calling fadeIn() and fadeOut() using jQuery.

For example:

$(function() {
    $('img.OldImage').fadeOut();
    $('img.NewImage').fadeIn();
});

Cross-Fade Between Images with CSS in Loop