CSS Crossfade Calculator

SETTINGS

seconds
seconds

PREVIEW

HTML

<div class="image-container">
  <img src="//placehold.it/250x200?text=Image%201">
  <img src="//placehold.it/250x200?text=Image%202">
</div>

CSS

.image-container {
  position: relative;
}

.image-container img {
  position: absolute;
  animation-name: multiple-image-crossfade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 14s;
}

.image-container img:nth-of-type(1) {
  animation-delay: 7s;
}

.image-container img:nth-of-type(2) {
  animation-delay: 0s;
}



@keyframes multiple-image-crossfade {
  0% {
    opacity:1;
  }
  36% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  86% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

SCSS

.image-container {
  position: relative;
  
  img {
    position: absolute;
    animation-name: multiple-image-crossfade;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-duration: 14s;
    &:nth-of-type(1) {
      animation-delay: 7s;
    }
    &:nth-of-type(2) {
      animation-delay: 0s;
    }

  }
}

@keyframes multiple-image-crossfade {
  0% {
    opacity:1;
  }
  36% {
    opacity:1;
  }
  50% {
    opacity:0;
  }
  86% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}
Approach and Algorithm courtesy of http://css3.bradshawenterprises.com/cfimg/