css - LESSCSS 和 @keyframes

Question

有没有人遇到过 LESSCSS 和@keyframesor的问题@-ms-keyframes？它为@-webkit-keyframes,@-moz-keyframes和@-o-keyframes.

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 中的关键帧生成似乎非常复杂，这就是为什么出现了不同的 hack 和工具，例如：

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