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

不，我不这么认为，但你可以使用像SASS / SCSS / LESS / ......这样的CSS语言（也就是CSS预处理器） - 输出（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“

对CSS3关键帧进行分组

1 个答案: