CSS Trasform, piccolo problemino...

[pollat]

Vorrei realizzare un'animazione css in cui il mio logo ogni tot secondi sfuma su 4 immagini leggermente differenti ed ho trovato una ottima soluzione col comando css trasform che è la seguente:

<style>
@-webkit-keyframes cf4FadeInOut { 
0% {   opacity:1; } 
17% {   opacity:1; } 
25% {   opacity:0; } 
92% {   opacity:0; } 
100% {   opacity:1; }
}

@-moz-keyframes cf4FadeInOut { 
0% {   opacity:1; } 
17% {   opacity:1; } 
25% {   opacity:0; } 
92% {   opacity:0; } 
100% {   opacity:1; }
}

@-o-keyframes cf4FadeInOut { 
0% {   opacity:1; } 
17% {   opacity:1; } 
25% {   opacity:0; } 
92% {   opacity:0; } 
100% {   opacity:1; }
}

@keyframes cf4FadeInOut { 
0% {   opacity:1; } 
17% {   opacity:1; } 
25% {   opacity:0; } 
92% {   opacity:0; } 
100% {   opacity:1; }
}


.logo {  
position:relative;  
height:281px;  
width:450px;  
margin:0 auto;
}

.logo img {  
position:absolute;  
left:0;
}

.logo img {  
-webkit-animation-name: cf4FadeInOut;  
-webkit-animation-timing-function: ease-in-out;  
-webkit-animation-iteration-count: infinite;  
-webkit-animation-duration: 16s;

-moz-animation-name: cf4FadeInOut;  
-moz-animation-timing-function: ease-in-out;  
-moz-animation-iteration-count: infinite;  
-moz-animation-duration: 16s;

-o-animation-name: cf4FadeInOut;  
-o-animation-timing-function: ease-in-out;  
-o-animation-iteration-count: infinite;  
-o-animation-duration: 16s;

animation-name: cf4FadeInOut;  
animation-timing-function: ease-in-out;  
animation-iteration-count: infinite;  
animation-duration: 16s;
}

.logo img:nth-of-type(1) {  
-webkit-animation-delay: 12s;  
-moz-animation-delay: 12s;  
-o-animation-delay: 12s;  
animation-delay: 12s;
}

.logo img:nth-of-type(2) {  
-webkit-animation-delay: 8s;  
-moz-animation-delay: 8s;  
-o-animation-delay: 8s;  
animation-delay: 8s;
}

.logo img:nth-of-type(3) {  
-webkit-animation-delay: 4s;  
-moz-animation-delay: 4s;  
-o-animation-delay: 4s;  
animation-delay: 4s;
}

.logo img:nth-of-type(4) {  
-webkit-animation-delay: 0;  
-moz-animation-delay: 0;  
-o-animation-delay: 0;  
animation-delay: 0;
}
</style>



<div class="logo" >  
<img src="http://css3.bradshawenterprises.com/images/Windows%20Logo.jpg" />  
<img src="http://css3.bradshawenterprises.com/images/Turtle.jpg" />  
<img src="http://css3.bradshawenterprises.com/images/Rainbow%20Worm.jpg" />  
<img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
</div>

Unico problema:
le mie 4 immagini di logo hanno parti in trasparenza e con il codice sopra all'inizio sono tutte una sopra l'altra per i primi 6 secondi creando un brutto effetto di sovrapposizione immagini. Come posso quindi far si che all'inizio sia visualizzata solo una delle 4 immagini ma non le altre?????