Grouping CSS3 keyframes

Question

I have realized that I can't simple accomplish the same code below by separating by coma @keyframes mymove, @-moz-keyframes mymove, etc... In order for them to work I need to declare it each one separately as below.

Is there any way to group them and make this code shorter?

@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

no, I don't think so, but you could use a CSS language (aka CSS preprocessor) like SASS/SCSS/LESS/... - the output (CSS) would still be the same, but changing something would be much easier!

Check out

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

if you're interested - the effort of installing them and setting them up is totally worth it!

EDIT: Using SCSS I did the following:

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

example of usage:

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

Although it should be added that you need the latest pre-release of SASS to be able to nest rules (we have got a "{" inside another "{" rule...) so you should update run "gem install sass --pre" which should get you "sass-3.2.0.alpha.104"