點播 - 優文庫

CSS3旋轉元素，我定義這個關鍵幀：點播

@-moz-keyframes rotate{ 
    0%{ 
     -moz-transform: rotate(0deg); 
    } 
    100%{ 
     -moz-transform: rotate(359deg); 
    } 
}

並應用於類名：

.rotate{ 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -moz-animation-name: rotate; 
}

和類添加到元素上的需求：

$('a').click(function(){ $(this).addClass('rotate'); }); /* and the class is applied */

但該物品不會旋轉;我究竟做錯了什麼？

請注意：我只在Firefox的測試，這就是爲什麼我只使用了-moz-供應商名稱

來源

2013-07-09 Toni Michel Caubet

有趣，downvote？ –

添加時間：

.rotate{ 
    -moz-animation-iteration-count: infinite; 
    -moz-animation-timing-function: linear; 
    -moz-animation-name: rotate; 
    -moz-animation-duration: 1s; 
}

持續時間定義每個旋轉需要多長時間。如果你不設置，the default is zero。

來源

2013-07-09 14:06:21 Blazemonger

但我想它無限...你建議我把它放在哪裏？我在.rotate類中嘗試過，並沒有改變.rotate類中的任何東西 –

？ –

我剛剛意識到它正在工作！但孩子不旋轉...任何想法爲什麼孩子不會旋轉？ –

-2

下面是工作示例

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{ 
width:100px; 
height:100px; 
background:red; 
animation:myfirst 1s infinite; 
-webkit-animation:myfirst 1s infinite; /* Safari and Chrome */ 
} 

@keyframes myfirst 
{ 
from {background:red;transform:rotate(0deg);} 
to {background:yellow;transform: rotate(360deg);} 
} 

@-webkit-keyframes myfirst /* Safari and Chrome */ 
{ 
from {background:red;-webkit-transform:rotate(0deg);} 
to {background:yellow;-webkit-transform: rotate(360deg);} 
} 
</style> 
</head> 
<body> 

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p> 

<div></div> 

</body> 
</html>

署名：源來自http://www.w3schools.com/css/css3_animations.asp。

來源

2013-07-09 14:14:11 sajay

是錯的..？ – sajay

它根本不使用OP的代碼。你剛剛從其他地方複製了一個沒有評論的例子。 – Blazemonger

反正它工作...只是試圖幫助...只是分享什麼工作... – sajay

點播

回答

相關問題