css - 画像を連続的に回転させる方法

Question

ホバー時に継続的に回転させたいロゴがあります。これを達成する方法は？css3 だけで実行可能ですか、それとも JavaScript のヘルプが必要ですか? そしてもう1つ、それらのロゴが浮かび上がると、回転を終了せずに停止します。ロゴがホバーされていない場合でも、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;