CSS3 Scale，Fade和Spin在同一元素上（爲什麼SCALE不能正常工作？！？）

確定noobs。需要此圈爲比例尺和淡入在動畫開始時（一邊旋轉）一次，然後繼續旋轉。沒那麼難對！！！得到褪色和旋轉工作，但規模只是拒絕工作！CSS3 Scale，Fade和Spin在同一元素上（爲什麼SCALE不能正常工作？！？）

是否有胖指某處？在我撕開我留下的頭髮之前，請暴露我的noobness和爲什麼SCALE不工作？謝謝，這就是全部......

最新FF只。 （懶惰爲一切代碼。）

<!DOCTYPE html> 
<html> 
<head> 
<style> 
div 
{width: 100px; 
height: 100px; 
background: transparent; 
border: solid 10px blue; 
border-radius: 50%; 
border-top: solid 10px transparent; 
border-bottom: solid 10px transparent; 

-moz-animation-name: scaleIn,fadeIn,spin; 
-moz-animation-duration: 1s,1s,1s; 
-moz-animation-timing-function: ease-in,ease-in,linear; 
-moz-animation-delay: 0,0,0; 
-moz-animation-iteration-count: 1,1,infinite; 
-moz-animation-direction: normal,normal,normal; 
-moz-animation-fill-mode: forwards,forwards,forwards; 
-moz-animation-play-state: running,running,running;} 

@-moz-keyframes scaleIn 
{ 
from {-moz-transform: scale(2);} 
to  {-moz-transform: scale(1);} 
} 

@-moz-keyframes fadeIn 
{ 
from {opacity: 0.0;} 
to  {opacity: 1.0;} 
} 

@-moz-keyframes spin 
{ 
from {-moz-transform: rotate(0deg);} 
to {-moz-transform: rotate(360deg);} 
} 

</style> 
</head> 
<body> 
<div></div> 
</body> 
</html>

來源

2013-03-29 DRAGON

這是因爲-moz-transform:rotate()是壓倒-moz-transform:scale()。他們需要一起

jsFiddle

@-moz-keyframes transformIn { 
    from { 
     -moz-transform: scale(2) rotate(0deg); 
    } 
    to { 
     -moz-transform: scale(1) rotate(360deg); 
    } 
}

至於如何得到它的旋轉和縮放，然後只需旋轉，你將需要另一個@keyframes

jsFiddle

@-moz-keyframes transformAnim { 
    from { 
     -moz-transform: rotate(0deg); 
    } 
    to { 
     -moz-transform: rotate(360deg); 
    } 
}

僅供參考您的-moz-animation-fill-mode規則爲我打破了第三個動畫：s不知道爲什麼，刪除它似乎工作精細。

來源

2013-03-29 03:25:36

DUDE！你搖滾！謝謝！ – DRAGON

舉起！我需要旋轉不停止在刻度和第二個旋轉動畫之間。那麼我們需要3個旋轉動畫嗎？ – DRAGON

[鏈接]（http://jsfiddle.net/dragontheory/sRdfD/9/） – DRAGON

CSS3 Scale，Fade和Spin在同一元素上（爲什麼SCALE不能正常工作？！？）

回答

相關問題