CSS3 animation transform rotate with no visible transition -
so, have image:
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); }
https://developer.mozilla.org/en/docs/web/css/timing-function
Comments
Post a Comment