css-crossfade-calculator

Visit https://adambergman.github.io/css-crossfade-calculator to use the calculator

About

This form generates the proper CSS (or SCSS) animation timing styles for crossfading any number of images with pure CSS. The animation will loop infinitely.

Approach and Algorithm

The approach is to create a single animation that fades opacity and then stagger the animation on each image element with animation-delay so that only one image is visible at a time with a crossfade between images.

The following algorithm is used to determine animation-delay and keyframe percentages for the fading animation. There will always be 5 key frames, with the first always being 0% and the last always being 100%.

n = total number of images
a = presentation time for a single image (seconds)
b = duration of crossfade between images (seconds)
t = total animation duration t = (a + b) * n

animation-delay (for each image) = t - i * (a + b) where i is the index of each image (1 through n)

Keyframe #1 – 0%
Keyframe #2 - a / t * 100%
Keyframe #3 - (a + b) / t * 100%
Keyframe #4 - 100% - (b / t * 100%)
Keyframe #5 - 100%

This approach and algorithm is courtesy of http://css3.bradshawenterprises.com/cfimg/

Example Results

Below are two examples with output from calculator at https://adambergman.github.io/css-crossfade-calculator

2 Images

Crossfade 2 images displaying each for 5 seconds with a 2 second crossfade.

HTML

<div class="image-container">
  <img src="//placehold.it/250x175?text=Image%201">
  <img src="//placehold.it/250x175?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;
  }
}

5 Images

Crossfade 5 images displaying each for 4 seconds with a 1 second crossfade.

HTML

<div class="image-container">
  <img src="//placehold.it/250x175?text=Image%201">
  <img src="//placehold.it/250x175?text=Image%202">
  <img src="//placehold.it/250x175?text=Image%203">
  <img src="//placehold.it/250x175?text=Image%204">
  <img src="//placehold.it/250x175?text=Image%205">
</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: 25s;
}

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

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

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

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

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



@keyframes multiple-image-crossfade {
  0% {
    opacity:1;
  }
  16% {
    opacity:1;
  }
  20% {
    opacity:0;
  }
  96% {
    opacity:0;
  }
  100% {
    opacity:1;
  }
}

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Builds production, commits and adds dist, pushes subtree to gh-pages branch on origin

yarn pages