简介
在前端开发中，我们经常需要对网页元素添加动画效果来提高用户体验。其中，CSS 动画是一种常用的方式。然而，手写 CSS 动画代码不仅费时费力，而且在兼容性等方面也存在一定的问题。因此，借助于成熟的 CSS 动画库或者框架变得非常重要。
这里我们介绍一个优秀的 CSS 动画库——momentum-css。 momentum-css 是一个纯 CSS 的动画框架，可以帮助前端开发人员快速而简便的创建各种酷炫的动画效果。它采用了基于数据属性的方法来定义动画，可以使使用非常方便。momentum-css 框架的使用可以减轻前端开发者的工作量，也可以帮助开发者在动画效果的实现过程中不断改进他们的技能。
安装
在使用 momentum-css 库之前，我们需要先将其安装到我们的项目中。这里我们使用 npm 包管理器，只需要在终端中运行以下命令：
npm install momentum-css
使用
安装完成之后，我们就可以将 momentum-css 库引入我们的项目。在 CSS 文件中添加以下代码即可：
@import 'path/to/node_modules/momentum-css/css/momentum.css';
动画定义方法
momentum-css 中定义动画采用了基于数据属性（data-）的方法。其中，data-m-animate 属性用于定义动画名称，data-m-bind 属性用于绑定需要执行动画的元素，data-m-duration 属性用于定义动画持续时间等。下面，我们来一个例子介绍 momentum-css 如何定义动画。
<div class="box" data-m-bind> <p>Hello world!</p> </div>
-- -------------------- ---- ------- ---- - ------ ------ ------- ------ ------- --- ----- ----- ----------- ------- ------- ---- ----- - - - ----------- ----- - ------------- - ------------------- --- -
上述代码中，我们为含有 data-m-bind 属性的 div 容器添加了如下 CSS 样式：
[data-m-bind] {
animation-name: <animation-name>;
animation-duration: <duration>;
animation-iteration-count: <iteration-count>;
animation-timing-function: <timing-function>;
}其中，animation-name 表示动画名称，animation-duration 表示动画执行时间，animation-iteration-count 表示动画执行次数，animation-timing-function 表示动画时间函数。
接下来，我们添加一个动画定义。在在 CSS 文件中添加以下代码：
-- -------------------- ---- -------
------------------------- -
--------------- ---------
-
---------- -------- -
--- ---- ---- ---- -
---------- --------------
-
--- -
---------- ------------------
-
--- -
---------- ------------------
-
-示例代码中，我们为动画名称定义了一个 m-bounce 的 keyframes，然后在 div 中添加了一个 data-m-animate="bounce" 的属性，即定义了需要执行的动画名称。
最后，我们还需要为动画设置一些必须的属性值，包括动画时间、动画次数和动画效果。这里我们在含有 data-m-bind 属性的 div 上添加了如下 CSS 样式：
[data-m-bind] {
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function: ease-in-out;
}完整代码如下：
<div class="box" data-m-bind data-m-animate="bounce"> <p>Hello world!</p> </div>
-- -------------------- ---- -------
---- -
------ ------
------- ------
------- --- ----- -----
----------- -------
------- ---- -----
-
- -
----------- -----
-
------------- -
------------------- ---
-------------------------- ---------
-------------------------- ------------
-
------------------------- -
--------------- ---------
-
---------- -------- -
--- ---- ---- ---- -
---------- --------------
-
--- -
---------- ------------------
-
--- -
---------- ------------------
-
-保存并运行，你将会看到如下效果：
结论
通过本文的介绍，我们了解了 momentum-css 动画库的使用方法。momentum-css 借助于基于数据属性的方法来定义动画效果，具有使用简单、扩展性强的特点。因此，使用 momentum-css 可以帮助前端开发人员快速而简便的创建各种酷炫的动画效果，减轻我们的工作量。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b4d51ab1864dac66829