LESSCSS和@keyframe

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

关键帧的生成似乎非常复杂，这就是为什么出现了不同的hack和工具，例如：

• https://github.com/kuus/animate-me.less一个有点复杂的混合，只需一个调用就可以同时生成关键帧和动画。接受动画元素选择器和关键帧css内容作为字符串。受keyframes
• https://github.com/thybzi/keyframes -me和其他解决方案的启发，我的工具中最多有10个步骤。仅生成关键帧。动画需要单独应用-这允许将多个动画应用到单个元素，也可以将相同的关键帧应用到多个元素。创建关键帧需要更多的动作，但使用真正的css/less方式来生成它们的样式(所以你可以在那里使用变量，操作，函数和混合)。最多16个关键帧步长