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/LESS/... - 出力（CSS）はまだ同じになり、何かを変えるほうがはるかに簡単です！もし興味があるなら

チェックアウト

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

- それらをインストールし、それらを設定するための努力は、それは全く価値があります！

EDIT：あなたのことができるようにするためにSASSの最新のプレリリースを必要とすることを追加する必要がありますが

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

：使用方法の

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

例：私は次のことをやったSCSSを使用します私たちはあなたに "sass-3.2.0.α104"を得るべきgem install sass --pre "を実行するように更新する必要があります。