如何連續旋轉圖像

我有徽標，我想要在盤旋時不斷旋轉。如何實現這一目標？它只適用於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) 
}

來源

2012-08-03 Jeg Bagus

你看着動畫定時功能？ – 2012-08-03 12:16:19

我在寫這個問題後，發現了其他任何問題。哈哈。是的，我找到了。比下一個問題，如何告訴動畫繼續，直到完成旋轉時，徽標是隱藏的。 – 2012-08-03 12:33:47

-1

嘗試用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;

來源

2012-08-03 12:28:12 Lukas

我認爲你需要使用關鍵幀動畫這一點。

演示（WebKit的）：jsFiddle

代碼：

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


} 

@-webkit-keyframes all 
{ 

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

}

來源

2012-08-03 12:32:22

第二種情況如何？ – 2012-08-03 12:45:52

我不確定這是否可能。也許你可以在這裏找到一些信息：http：//www.w3.org/TR/css3-animations/ – 2012-08-03 13:12:01

現在當我想到它時，我覺得現在不可能。當您將鼠標懸停在動畫「中斷」上並且元素跳回到原始狀態時。但是，您可能可以添加轉換到原始狀態，該狀態在動畫停止時啓動... – 2012-08-04 20:14:18

如何連續旋轉圖像

回答

相關問題