CSS3 animation transform rotate with no visible transition -


so, have image:

enter image description here

i'd rotate on hover, give illusion of squares animating different colours. however, had settle for:

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

as if used animation , keyframes % step, physically see logo rotate, i'd snap next deg value, if possible. how infinitely on hover?

you can use timing-functions steps,

@-webkit-keyframes rotate {   {     -webkit-transform: rotate(0deg);   }   {      -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


Comments

Popular posts from this blog

Android layout hidden on keyboard show -

google app engine - 403 Forbidden POST - Flask WTForms -

c - Why would PK11_GenerateRandom() return an error -8023? -