Tailoring CSS Animation

[usrbin]

I'm trying to tailor a css animation but I'm having some trouble.

This is the animation now and it works great:

div{width:58px;height:58px;margin:100px auto;background:#f00;border-radius:100%;animation:load 1s infinite ease-in-out}
@keyframes load{0% {transform:scale(0)} 100% {transform:scale(1);opacity:0}}

It creates a colored dot that fades while it grows. What I would like it do it is cycle through three colors: red, green, and blue, with each one taking a second and loop infinity.

I tripled the animation time and added additional stops but it goes through all three colors extremely fast and has a long pause:

div{width:58px;height:58px;margin:100px auto;border-radius:100%;animation:load 3s infinite ease-in-out}
@keyframes load{
0% {transform:scale(0);background:#f00} 33% {transform:scale(1);opacity:0}
34% {transform:scale(0);background:#0f0} 66% {transform:scale(1);opacity:0}
67% {transform:scale(0);background:#00f} 100% {transform:scale(1);opacity:0}}

How can I achieve each dot taking a second with a different color?

[not2easy]

Maybe try using animation-timing-function? I have not used any animation settings myself, but it looks like it would handle that timing problem: [w3.org...]