分組CSS3關鍵幀

Question

我已經意識到，我不能簡單地通過昏迷@keyframes mymove, @-moz-keyframes mymove, etc..分離完成相同的代碼。爲了讓他們工作，我需要分別聲明如下。

有什麼辦法可以將它們分組並縮短這段代碼嗎？

@keyframes mymove 
{ 
from {top:0px;} 
to {top:200px;} 
} 

@-moz-keyframes mymove /* Firefox */ 
{ 
from {top:0px;} 
to {top:200px;} 
} 

@-webkit-keyframes mymove /* Safari and Chrome */ 
{ 
from {top:0px;} 
to {top:200px;} 
} 

Answer 1

不，我不這麼認爲，但你可以使用一個CSS語言（又名CSS預處理器）像SASS/SCSS /更少/ ... - 輸出（CSS）仍然是相同的，但改變一些東西會容易得多！

退房

• http://sass-lang.com/
• http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and-comparison-to-sass/

如果你有興趣 - 他們安裝和設置起來的努力是完全值得的！

編輯：使用SCSS我做了以下內容：使用的

@mixin keyframes($name) { 
    @-webkit-keyframes #{$name} { @content; } 
    @-moz-keyframes #{$name} { @content; } 
    @keyframes #{$name} { @content; } 
} 

例如：

@include keyframes(pulse) { 
    0%,100% { 
     opacity: 0; 
    } 
    50% { 
     opacity: 1; 
    } 
} 

雖然應該補充的是，你需要上海社科院最新發布前能夠嵌套規則（我們有一個「{」在另一個「{」規則...），所以你應該更新運行「gem install sass --pre」這應該讓你「sass-3.2.0.alpha.104」