Estoy bastante seguro de que es posible hacer un fundido cruzado de imágenes solo con CSS utilizando las nuevas funciones de animación CSS. Mis requisitos son que debería funcionar para un número arbitrario de imágenes sin javascript.

¿Alguien sabe cómo se hace?

Cómo estoy empezando:

img(src='img1.png')
img(src='img2.png')
img(src='img3.png')
img(src='img4.png')

A continuación, todas las imágenes están configuradas para apilarse una encima de la otra y la primera muestra:

img
  opacity 0
  transition 1s
  position absolute

  &:first-child
    opacity 100

Ahora, ¿cómo paso por cada imagen?

Edit: Parece imposible. Requiere javascript.