关键帧在使用LESSHat时不能在更少的混合中工作。

Question

这里是标准的CSS，我正在努力生产，但希望使用较少的米辛来做这项工作。您可以使用纯css 这里检查工作演示。

纯CSS

@keyframes rotate {
    0%{
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(180deg);
    }
}

@-webkit-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(180deg);
    }
}

@keyframes rotate-fix {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes rotate-fix {
    0% {
        -webkit-transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
    }
}

我使用的是与以下职位中相同的混音，如下所示。

.keyframes(@name, @frames) {
    @-webkit-keyframes @name { @frames(); }
    @-moz-keyframes @name { @frames(); }
    @-ms-keyframes @name { @frames(); }
    @-o-keyframes @name { @frames(); }
    @keyframes @name { @frames(); }
}

我就是这样用的：

.keyframes(rotate, {
    0%{
        .transform(rotate(0)); // This is transform mixin from LESSHat
    }

    100%{
        .transform(rotate(180));
    }
});

.keyframes(rotate-fix, {
    0%{
        .transform(rotate(0));
    }

    100%{
        .transform(rotate(360));
    }
});

但是，它不起作用。按钮的动画不会旋转。当不把它作为一个混合体时，代码工作得很好。有人能告诉我我在这里错过了什么吗？

生成的CSS如下所示：

@-moz-keyframes rotate {
  .....
}
@-o-keyframes rotate {
  .....
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}
@keyframes rotate {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
  }
}

@-moz-keyframes rotate-fix {
  .....
}
@-o-keyframes rotate-fix {
  .....
}
@-webkit-keyframes rotate-fix {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes rotate-fix {
  0% {
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

Answer 1

一定要插进去

就像这样：

    .keyframes(~'<keyframes-name>, <keyframes-definition>') 

然后看看减帽子文档关键帧部分。