CSS3 animation transform rotate with no visible transition

Question

So, I have an image:

I'd like to rotate it on hover, to give the illusion of the squares animating different colours. However, I had to settle for:

.logo:hover {
    transform: rotate(90deg);
}

As if I used animation and keyframes with % step, you could physically see the logo rotate, I'd like it to snap to the next deg value, if possible. How could I do this infinitely on hover?

Answer 1

You can use the timing-functions steps ,

@-webkit-keyframes rotate {
  from {
    -webkit-transform: rotate(0deg);
  }
  to { 
    -webkit-transform: rotate(360deg);
  }
}

.logo:hover {
    -webkit-animation: rotate 1s infinite steps(2, start);
}

http://jsfiddle.net/g3M2C/

https://developer.mozilla.org/en/docs/Web/CSS/timing-function