Problema con animación CSS3

[eduardobrutaldeath]

Hola a todos,
Quiero que el fondo de mi DIV cambie de colores consecutivamente entre blanco, rojo y negro, como si estuviera oscilando. Para eso estoy practicando con este código:

Código CSS:

DIV{
-webkit-animation-name: eduardo;
-webkit-animation-duration: 10s;
-webkit-animation-direction: normal;
-webkit-animation-interation-count: infinite;
}
 
@-webkit-keyframes eduardo{
 
 
0%{
background: black;
}
50%{
background: red;
}
100%{
background: white;
}
 
 
}
 

Con el código de arriba consigo que mi DIV cambie su fondo infinitamente de 3 colores, sin embargo no puedo hacer que se detenga un momento en cada color pues pasa con rapidez, y cuando intento cambiar el número de duración (-webkit-animation-duration: 60;) LA ANIMACIÓN DEMORA MÁS PERO TIENE UN EFECTO DE TRANSICIÓN, COMO SI EL COLOR SE DILUYERA LENTAMENTE PARA DAR PASO A OTRO. No quiero que se diluya sino que se quede en un color sólido hasta el siguiente cambio, o en todo caso quisiera quitar el efecto de transición que por defecto tiene la ANIMATION, no se si me entienden...

[faillure]

¿Conoces la propiedad Transition-timing-function y uno de sus posibles valores steps()?

Otra forma sería aumentar los keyframes

Código CSS:

0%{background: black;}
33.3% {background: black;}
33.33% {background: red;}
66.6% {background: red;}
66.66% {background: white;}
99.9% {background: white;}
99.99%  {background: black;}
 

siempre y cuando no la declares como alternate