25、Less动画与贡献指南

Less动画与贡献指南

1. 使用Less进行动画转换

可以使用像Sublime Text这样的工具中的搜索和替换功能，轻松转换动画类。具体操作步骤如下：
1. 更新 animation-duration 和 animation-fill-mode 行，使用Less mixin。
2. 移除其余行。

完成搜索和替换后，第一个示例代码如下：

.magictime {
  .vendor(animation-duration, 1s);
  .vendor(animation-fill-mode, both);
}

按照此过程，可将 magic.less 中的所有动画类进行转换。此时会得到一个半转换的CSS文件，它能正常工作。同时，也可使用相同原则转换 keyframes.less 文件。

1.1 使用供应商前缀的警告

将供应商前缀集中到一个文件可能会使CSS代码变得冗长，这被一些人认为是反模式。供应商前缀会不断变化，将它们集中处理假设了所有属性的供应商前缀保持不变，但实际并非如此。在所有动画属性都不再需要某个供应商前缀之前，不能移除它，而这可能需要很长时间。

更好的方法是使用自动前缀工具，如Alejandro Beltrán的Autoprefixer（https://github.com/ai/autoprefixer ），还有适用于Sublime Text的插件（https://git