分组 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/

如果您有兴趣 - 安装和设置它们的努力是完全值得的！

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