LESSCSS和@keyframes

Question

是否有人遇到过LESSCSS和@keyframes或@-ms-keyframes的问题？它编译了@-webkit-keyframes，@-moz-keyframes和@-o-keyframes的CSS罚款。

Answer 1

这些已列入白名单，-ms缺失。 keyframes应该有效：https://github.com/cloudhead/less.js/blob/master/lib/less/parser.js#L988

有一项针对修复的公开请求：https://github.com/cloudhead/less.js/pull/498

常见的解决方法是将关键帧放在您导入的单独.css文件中 - 扩展名为.css的文件不会被LESS解析。

Answer 2

关键帧生成似乎在LESS中非常复杂，这就是为什么会出现不同的黑客和工具，例如：

• https://github.com/kuus/animate-me.less 有点复杂的mixin通过一次调用生成关键帧和动画。接受动画元素选择器和关键帧css内容作为字符串。关键帧最多10个步骤
• https://github.com/thybzi/keyframes 我的工具受到animate-me和其他解决方案的启发。仅生成关键帧。动画需要单独应用 - 这允许将多个动画应用于单个元素，并且将相同的关键帧应用于多个元素。创建关键帧需要更多操作，但使用真正的css / less方式生成其样式（因此您可以在那里使用变量，操作，函数和混合）。最多16个关键帧步骤