Regroupement des images-clés CSS3

Question

J'ai réalisé que je ne pouvais pas simplement accomplir le même code ci-dessous en séparant par coma @keyframes mymove, @-moz-keyframes mymove, etc... Pour qu'ils fonctionnent, je dois les déclarer séparément comme ci-dessous.

Y a-t-il un moyen de les regrouper et de raccourcir ce code?

@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

non, je ne le pense pas, mais vous pouvez utiliser un langage CSS (aka CSS préprocesseur) comme SASS/SCSS/MOINS/... - la sortie (CSS) serait toujours le même, mais changer quelque chose serait beaucoup plus facile!

Découvrez

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

si vous êtes intéressé - l'effort de les installer et de les mettre en place est vraiment la peine!

EDIT: En utilisant SCSS je l'ai fait ce qui suit:

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

exemple d'utilisation:

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

Bien qu'il faut ajouter que vous avez besoin de la dernière pré-version de SASS pouvoir règles d'imbrication (nous avons un "{" dans une autre "{" règle ...) donc vous devriez mettre à jour exécuter "gem install sass --pre" qui devrait vous "sass-3.2.0.alpha.104"