CSS fading image gallery not working properly

I am trying to create an image gallery which works by having four images stacked and one fading away every eight seconds, i had it working with two images and have been trying to make it work with four using animation-delay although this does not seem to be working properly. Here is the CSS:

#cf {
position: relative;
height: 100%;
width: 100%;
margin: 0 auto;
}

#cf img {
position:absolute;
left:0;
width: 100%;
height: 100%;
-webkit-transition: opacity 1s ease-in-out;
-webkit-animation: cFade 32s ease-in-out infinite normal;
}

@-webkit-keyframes cFade {
0% {
    opacity:1;
}

21.875% {
    opacity:0;
}

25% {
    opacity:0;
}
68% {
    opacity:0;
}
100% {
    opacity:1;
} 
}

#cf img.first {
-webkit-animation-delay: 0s;       
}
#cf img.second {
-webkit-animation-delay: 8s;
}

#cf img.third {
-webkit-animation-delay: 16s;
}

#cf img.fourth {
-webkit-animation-delay: 24s;
}