2

我已经意识到我不能简单地通过 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;}
}
4

1 回答 1

3

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

于 2012-04-29T14:20:35.787 回答