[CSS3] Animation qui change le background-image à durée inégale

Bonjour à tous.

J'ai un petit problème, je ne suis pas débutant en développement web mais un soucis m'est parvenu lorsque je voulais créer une animation.

J'ai une div appelée "first" dans laquelle je veux que 3 images s'affichent les unes à la suite des autres en fondu. Pour cela, j'ai mis ces 3 images dans une animation. Le problème c'est que les temps d'affichage des images sont inégaux.

Voici le .css (le .html contient uniquement ma div) :

body {
	margin: 0;
	padding: 0;
	height: 700px;
	overflow: hidden;
}

#first {
	text-align: center;
	width: 100%;
	height: 100%;
	background-image: url("wa.jpg");
	background-size: 100% 100%;
	-webkit-animation: imgFondu infinite alternate 30s;
	animation-timing-function: linear;
/*	-webkit-animation: [name] [iteration] [direction] [duration] [delay] */
}


/* - On affiche wa.jpg
- On affiche ensuite wa1.jpg en fondu
- On affiche ensuite wa2.jpg en fondu 
- L'animation revient sur ses pas grâce à ALTERNATE
- On raffiche wa1.jpg en fondu
- On raffiche wa.jpg en fondu
- On recommence l'opération à l'infini grâce à INFINITE */

@-webkit-keyframes imgFondu {
	0%{
		background-image: url("wa.jpg");
	}
	20%{
		background-image: url("wa.jpg");
	}
	40%{
		background-image: url("wa1.jpg");
	}
	60%{
		background-image: url("wa1.jpg");
	}
	80%{
		background-image: url("wa2.jpg");
	}
	100%{
		background-image: url("wa2.jpg");
	}
}

Merci d'avance !