css - 分组 CSS3 关键帧

Question

我已经意识到我不能简单地通过 coma 分隔来完成下面的相同代码@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;}
}

score 3 · Accepted Answer

不，我不这么认为，但是您可以使用 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"

css - 分组 CSS3 关键帧

1 回答 1

Related

Reference