Simple CSS image cross-fading acting weird

I am trying to create a very simple image cross fade effect with four different pictures. It should go smoothly from 1st to the 2nd, from 2nd to 3rd, 3rd to 4th and then back to the 1st.

This is the code I am using:

HTML:

    <div class="css-slideshow"> 
      <figure> 
            <img src="test1.jpg"/> 
      </figure> 
      <figure> 
            <img src="test2.jpg"/> 
      </figure>
      <figure> 
            <img src="test3.jpg" /> 
      </figure>
      <figure> 
            <img src="test4.jpg" /> 
      </figure>  
    </div>

...and CSS:

    figure:nth-child(1) {
       -webkit-animation: xfade 12s 9s infinite;
    }
    figure:nth-child(2) {
       -webkit-animation: xfade 12s 6s infinite;
    }
    figure:nth-child(3) {
       -webkit-animation: xfade 12s 3s infinite;
    }
    figure:nth-child(4) {
       -webkit-animation: xfade 12s 6s infinite;
    }


    @-webkit-keyframes xfade{
     0%   { opacity:1; }
     19%  { opacity:1; }
     25%  { opacity:0; }
     94%  { opacity:0; }
     100% { opacity:1; }
    }

The idea is the whole sequence should take 12 seconds.

The first loop looks great, the transitions are smooth, everything works like a charm. However, with the start of the second, and any other loop, it looks like it's not fading directly to the next image, but sort of through the white background. You can spot a "flash" while fading.

Can you help me? I am guessing the problem lays somewhere in that percentage, but I'm not sure.

Thank you