Cross-Fade between images with CSS in loop

Question

I want to fade between images in a loop (like result here-jsfiddle.net/5M2PD) but purely through CSS, no JavaScript. I tried using key-frames but I

Answer 1

I've made a dynamic solution with SASS. It's possible to configure:

• Total animation time
• Amount of items
• Transition speed

It automatically calculates the keyframe percentages and delays between items.

Codepen.io demo

// Demo styles
.fadecycle div {
  opacity: 0;
  position: absolute;
  width: 200px;
  line-height: 200px;
  text-align: center;
}

.fadecycle div:nth-child(1) { background: lightsalmon; }
.fadecycle div:nth-child(2) { background: lightsteelblue; }
.fadecycle div:nth-child(3) { background: lightseagreen; }
.fadecycle div:nth-child(4) { background: lightskyblue; }

// Animation settings
$totalTime: 8s;
$items: 4;
$transitionSpeed: 1.5;

// Calculate transition + display time in seconds
$transitionTime: 0s + $totalTime / ($items * $transitionSpeed * 2);
$displayTime: (0s + $totalTime - ($transitionTime * $items)) / $items;

// Set transition for each element
@for $i from 1 through $items {
  .fadecycle div:nth-child(#{$i}) {
    // Delay is increased for each item
    // starting with an offset of -$transitionTime so the first element is displayed on load
    $delay: -$transitionTime + ($transitionTime + $displayTime) * ($i - 1);
    animation: fadeinout $totalTime linear $delay infinite;
  }
}

// Calculate percentages of the times for keyframes
$transitionPercentage: 0% + 100 * ($transitionTime / $totalTime);
$displayPercentage: 0% + 100 * ($displayTime / $totalTime);

@keyframes fadeinout {
  0% {
    opacity: 0;
  }
  #{$transitionPercentage},
  #{$transitionPercentage + $displayPercentage} {
    opacity: 1;
  }
  #{$transitionPercentage + $displayPercentage + $transitionPercentage},
  100% {
    opacity: 0;
  }
}