CSS 动画是网页设计中不可或缺的组成部分，它不仅可以为网页增加美感和趣味性，还可以为用户提供更好的交互体验。但是，使用原生的 CSS 实现复杂的动画效果常常麻烦且代码量大。而使用 LESS 可以大大简化代码的编写和维护，让动画效果的实现更加高效、简洁。
前置知识
在使用 LESS 实现动画效果之前，我们需要先了解一些基本的 CSS 属性和语法，例如 transition、transform、@keyframes 等。如果你对这些内容不够熟悉，可以先复习一下 CSS 动画的基础知识。
在 LESS 中使用动画
LESS 是一种 CSS 预处理器，它可以将 CSS 语法转化为更为灵活的代码。在 LESS 中，我们可以使用变量、函数、混合（mixin）等特性，极大地方便了代码的编写和维护。
在使用 LESS 实现动画效果时，我们可以通过以下步骤进行：
- 定义动画相关的变量和混合
- 在需要添加动画效果的元素上使用对应的混合
定义动画相关的变量和混合
我们可以通过 LESS 中的变量和混合定义动画所需要的参数，例如动画时长、缓动函数等。下面是一个例子：
-- -------------------- ---- ------- -- ----------- -------------------- ----- ------------------ --------- -- ------- --------------------- ------- - -------------------- ------- ----------------- ------- ---------------- ------- --------------- ------- ------------ ------- -展开代码
在上面的代码中，我们先定义了动画的时长和缓动函数，然后定义了一个 .animation() 混合，用于为元素添加动画效果。该混合接受两个参数 @property 和 @value，用于指定要添加动画效果的 CSS 属性和对应的值。.animation() 混合中使用了多个前缀以保证兼容性，并使用了 LESS 中的变量和插值语法。
在元素上使用混合实现动画效果
在定义好动画相关的变量和混合之后，我们可以开始将它们应用到需要添加动画效果的元素上了。下面是一个例子：
-- -------------------- ---- ------- -- ---------- ------- ------------------ -- --------- ---- - --------------------- ------------ ------------------------------- ----------- ------------------------------- --------------------- -------------------------------------- ------------------- ------- - --------------------- ------------ - -展开代码
在上面的代码中，我们先通过 @import 关键字引入了之前定义好的 .animation() 混合。然后，我们使用 .animation() 混合为按钮添加了缩小动画效果、CSS 过渡的属性、时长和缓动函数。最后，我们使用 :hover 伪类来为按钮添加放大动画效果。这样，当用户悬停在按钮上时，它就会由原来的 0.9 倍大小渐变到 1.0 倍大小。
示例代码
以下代码演示了如何使用 LESS 实现一个简单的图片展示动画效果：
-- -------------------- ---- ------- -- ----------- -------------------- ----- ------------------ --------- -- ------- --------------------- ------- - -------------------- ------- ----------------- ------- ---------------- ------- --------------- ------- ------------ ------- - -- --------- --- - --------------------- ------------ ------------------------------- ----------- ------------------------------- --------------------- -------------------------------------- ------------------- ------- - --------------------- ------------ - -展开代码
通过以上 LESS 代码，我们为图片添加了一个在悬停时缩小到原来的 0.8 倍并带有渐变效果的动画效果。如果你想要实现更加复杂的动画效果，可以通过在 LESS 中使用 @keyframes 来定义关键帧动画。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67ceb4e3e46428fe9e949bc5
