分组CSS3关键帧

我意识到我不能简单地通过coma

@keyframes mymove、@-moz keyframes mymove等来完成下面相同的代码。为了让他们工作，我需要分别声明如下

有没有办法将它们分组并缩短代码

@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;}
}

不，我不这么认为，但是您可以使用CSS语言（也称为CSS预处理器），如SASS/SCSS/LESS/…-输出（CSS）将保持不变，但更改某些内容将更容易

退房





如果您感兴趣，那么安装和设置它们的努力是完全值得的

编辑：使用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;
    }
}

虽然需要补充的是，您需要最新的SASS预发行版才能嵌套规则（我们在另一个“{”规则中有一个“{”）所以您应该更新运行“gem install SASS--pre”，这将得到“SASS-3.2.0.alpha.104”
我已经在使用Compass和SASS。但我不确定他们除了实验性的扩展之外还有什么方法可以实现这一点。