css - 如何使图像连续旋转

Question

我有一个标志，我想在悬停时不断旋转。如何做到这一点？仅使用 css3 可行还是我们需要 javascript 帮助？还有一件事，当那些标志取消悬停时，它只是停止而没有完成旋转。即使 Logo 未悬停，我们如何告诉 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);}

}