Css 转换仅接受来自&；的mixin；设置关键帧选择器的步骤接受多个关键帧选择器的步骤

我有一个小混音：

.keyframes (@name, @fromRules, @toRules) {
    @-webkit-keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
            @keyframes ~'@{name}' { from { @fromRules(); } to { @toRules(); } }
}

例如，我呼吁：

.keyframes(fade-in,
    {
        opacity: 0;
    },
    {
        opacity: 1;
    }
);

结果是：

@-webkit-keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

但如何才能使用较少的混合，以便使用不同于0%、100%的关键帧选择器，以及超过2个关键帧选择器，以便结果如下所示：

@keyframes fade-in {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}

---

感谢您的帮助。

您可以通过将整个关键帧选择器列表的规则（如

0%

、

50%

、

100%

等）作为单个规则集与动画名称一起传递给mixin来实现这一点

正如注释中的七个阶段max所述，

@-webkit keyframes~'{name}

不是必需的，它可以简单地写成

@-webkit keyframes@name

.keyframes (@name, @rules) {
    @-webkit-keyframes @name { @rules(); }
            @keyframes @name { @rules(); }
}

div{
    .keyframes(fade-in,
    {
        0% { opacity: 0;}
        50% { opacity: 1;}
        100% { opacity: 0;}
    });
}

-单击CSS框中的eye图标以查看编译后的输出

注意：

• 是在Less v1.7.0中引入的，因此上面的代码将不适用于较低版本

---

只需从mixin中删除from和to规则，并将整个规则（以及所有其他百分比分割）作为一个参数传递给mixin。或者有多个mixin，1个用于2阶段，另1个用于3阶段。顺便说一句，您可以在这里看到a.Btw，还请注意，您不需要那里的

~“

内容。Just

@name

是绝对正确的语法。@Harry请添加您的评论作为答案，以便接受。