CSS3 动画是前端开发中常用的一种效果，可以为网页增添美观和动感。而 LESS 是一种预处理器，可以让我们的样式表更加简洁和易于维护。本文将介绍如何使用 LESS 与 CSS3 动画相结合，更加方便地实现动画效果，同时减少 CSS 代码的冗余。
CSS3 动画简介
CSS3 动画是利用 CSS 的属性值进行变化，从而实现动画效果。目前主流的方式是使用 @keyframes 关键字定义动画关键帧，再通过 animation 属性来控制动画的执行。以下是一个简单的例子：
-- -------------------- ---- ------- ---------- ------ - ---- ------ ----- -- ------ ------- - --- - --------- --------- ---------- ------ --- -
上面的代码定义了一个从 0px 到 200px 的左移动画，执行时间是 5 秒钟。
LESS 简介
LESS 是一种 CSS 预处理器，它以 CSS 为基础，增加了一些额外的功能。通过 LESS，我们可以使用变量、函数、混合器（mixins）等方式来编写样式表。这些功能可以大大简化样式表的编写和维护。
以下是一个 LESS 的例子：
-- -------------------- ---- -------
------------- --------
---------- -
------ -------------
----------------- -------------------- -----
------- -
----------------- --------------------- -----
-
-上面的代码定义了一个名为 .my-button 的类，它具有自定义颜色，并且在 hover 时改变背景颜色。其中 @brand-color 是一个变量，它可以在后面的样式中重复使用。
LESS 中的动画混合器
LESS 提供了 @keyframes 的变体，即 mixins，使得定义和使用动画更加简洁易懂。以下是一个使用 LESS mixins 的例子：
-- -------------------- ---- -------
--------- -
---------- -------- ---
-
---------- -
---------- --------- ---
-
----------------------- --- -
------------------- ----------
--------------- --------- ----------
-------------------- ----------
-------------------- -----
-
---------- -------- -
--- ---- ---- ---- ---- -- -
-------------------------- ------------------- ------ ------ -------
---------- -------------------
-
----
--- -
-------------------------- ------------------- ------ ------ -------
---------- -------------- ------ ---
-
--- -
---------- -------------- ------ ---
-
--- -
---------- -------------- ------ ---
-
-
---------- --------- -
----
----
----
--- -
-------------------------- ------------------- ------ ------ -------
---------- -------------- ------ ---
-
----
----
--- -
-------- --
---------- -------------- -- ---
-
-- -
-------- --
---------- -------------- ------- ---
-
-上面的代码定义了三个类：.bounceIn、.bounceOut 以及 .bounceInOut。前两个类分别对应不同的动画效果，而后一个类则是一个动画复合效果。.bounceInOut 可以响应一个可选的 @duration 参数来指定动画时间。.bounceIn 和 .bounceOut 分别对应动画效果的定义，使用 @keyframes 定义。
与 CSS3 动画结合使用
以上示例代码均已经包含了使用 LESS mixins 定义动画的方法。接下来，我们将按照以下步骤，演示如何使用 LESS 定义动画并在 HTML 中使用它们。
- 引入 LESS 文件
首先，在 HTML 的 head 中引入 LESS 文件：
<head> <link rel="stylesheet/less" href="style.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.3/less.min.js"></script> </head>
- 定义动画 mixin
在 LESS 文件中定义动画 mixin：
-- -------------------- ---- -------
--------- -
---------- -------- ---
-
---------- -
---------- --------- ---
-
----------------------- --- -
------------------- ----------
--------------- --------- ----------
-------------------- ----------
-------------------- -----
-
---------- -------- -
--- ---- ---- ---- ---- -- -
-------------------------- ------------------- ------ ------ -------
---------- -------------------
-
----
--- -
-------------------------- ------------------- ------ ------ -------
---------- -------------- ------ ---
-
--- -
---------- -------------- ------ ---
-
--- -
---------- -------------- ------ ---
-
-
---------- --------- -
----
----
----
--- -
-------------------------- ------------------- ------ ------ -------
---------- -------------- ------ ---
-
----
----
--- -
-------- --
---------- -------------- -- ---
-
-- -
-------- --
---------- -------------- ------- ---
-
-- 使用动画
在 HTML 中使用动画 mixin：
<button class="my-button bounceInOut">Bounce In Out Button</button>
上面的代码中，我们在按钮上定义了 .my-button 类和 .bounceInOut 类。.my-button 控制按钮的样式，.bounceInOut 添加动画效果。在 CSS 中我们只需要定义 .my-button，而动画效果已经在 LESS 中定义好，直接使用即可。
结论
本文介绍了如何使用 LESS 与 CSS3 动画相结合，使得动画效果更加易于维护，并且让我们的代码更加简洁。
通过这种方式，我们可以使用 LESS 定义多个动画 mixin，并在需要使用动画的元素上添加 mixin，避免了定义大量的动画样式的繁琐。同时，使用 LESS 变量和函数可以预先定义好常用的样式和计算方法，使得代码更加简洁明了。
-- -------------------- ---- -------
-- ------
--------------- --------
--------------- --------
--------------- --------
-------------- --------
-- ------
--------------- ----
---------------- -----
--------------- -----
-- ------
---------- -
------ ----------------------- -----
----------------- ---------------
-------- -------------- ----------------
-------------- ----
---------- -----
------- -
----------------- ---------------------- -----
-
-
--------- -
------ -----
----------------- ---------------
-------- --------------- ---------------
-------------- ----
---------- -----
--------------- -
----------------- ---------------
-
-------------- -
----------------- --------------
-
-总之，这种方式可以提高开发效率，更加专注于业务开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6775ff566d66e0f9aa087494