Suite à cette question, je me suis colleté avec le problème et cela me paraissait impossible au premier (CSS2) et au deuxième (CSS3) abord. Mais j'ai découvert que j'avais tord, car il suffit d'utiliser une transition-timing-function, pour le fading : transition: background-image 1s ease-in 0.5s; et transition: background-image 1s ease-out 0.5s;.
Exemple :
1 2 3 4
| <!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
<!-- |
...