css - 分组 CSS3 关键帧

Question

我意识到我不能简单地通过用逗号分隔@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;}
}

Answer 1

不，我不这么认为，但你可以使用 CSS 语言(又名 CSS 预处理器)，如 SASS/SCSS/LESS/... - 输出 (CSS) 仍然是相同的，但改变一些东西会更容易!

checkout

• 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”