css - 如何连续使图像旋转

Question

我有徽标，我想在悬停时连续旋转。如何做到这一点？仅使用 css3 是否可行，或者我们需要 javascript 帮助？还有一件事，当那些标志悬停时，它会在没有完成旋转的情况下停止。即使徽标未悬停，我们如何告诉 css 完成旋转。

我目前的CSS是：

header .logo:hover img{ 
    -webkit-transition: all 1.2s ease-in;
    -moz-transition: all 1.2s ease-in;
    -o-transition: all 1.2s ease-in;
    -ms-transition: all 1.2s ease-in;
    -moz-transform: rotateY(720deg);
    -webkit-transform: rotateY(720deg);
    transform: rotateY(720deg); 
    filter: progid : DXImageTransform.Microsoft.BasicImage ( rotation = 2 )
}

Answer 1

我认为您需要为此使用关键帧动画。

演示（webkit）：jsFiddle

代码：

.one:hover {
    -webkit-animation: all 1.2s linear infinite;


}

@-webkit-keyframes all
{

0%   {-webkit-transform: rotateY(0deg);}
100% {-webkit-transform: rotateY(720deg);}

}

Answer 2

尝试使用 css3 动画：

-webkit-animation: slide 10s linear infinite;
-moz-animation: slide 10s linear infinite;
-ms-animation: slide 10s linear infinite;
-o-animation: slide 10s linear infinite;
animation: slide 10s linear infinite;