[英]CSS3 animation transform rotate with no visible transition
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. 好像我使用%step的animation
和关键帧,你可以看到徽标旋转,我希望它可以捕捉到下一个deg
值,如果可能的话。 How could I do this infinitely on hover? 我怎么能在悬停时无限地做到这一点?
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/ http://jsfiddle.net/g3M2C/
https://developer.mozilla.org/en/docs/Web/CSS/timing-function https://developer.mozilla.org/en/docs/Web/CSS/timing-function
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.