Crossfade slideshow

gistfile1.styl

$image-quantity = 4
$time-per-image = 6
$time-crossfade = 1
$total-duration = ($time-crossfade + $time-per-image) * $image-quantity
$final-frame = 100%

@keyframes crossfade
  0%
    opacity 1
  {$time-per-image/$total-duration * $final-frame}
    opacity 1
  {($time-crossfade + $time-per-image)/$total-duration * $final-frame}
    opacity 0
  {$final-frame - ($time-crossfade/$total-duration * $final-frame)}
    opacity 0
  {$final-frame}
    opacity 1

ul
  position relative
  
li
  animation-name crossfade
  animation-timing-function ease-in-out
  animation-iteration-count infinite
  animation-duration $total-duration * 1s
  position absolute
  left 0
  width 100%
  
  
$colors = ( #f00 #0f0 #00f #000 )

for $index in (1..$image-quantity)
  .item-{$index}
    animation-delay abs($index - $image-quantity) * ($total-duration/$image-quantity) * 1s
    background-color $colors[$index - 1]