在前端开发中，动画是一个很常见的元素。而使用 CSS 的 @keyframes 规则来制作动画是一种非常有效的方式。然而，当我们需要制作复杂的动画时，@keyframes 规则就有些力不从心了。此时，我们可以使用 keyframes-functions 这个 npm 包来帮助我们更加高效地制作动画效果。
什么是 keyframes-functions
keyframes-functions 是一个 css 动画函数库，它提供了一种将多个 CSS 关键帧组成动画的方式。使用 keyframes-functions ，我们可以很方便地定义一系列的轨迹函数，然后将它们组合起来，创建出复杂的动画效果。
安装
在使用 keyframes-functions 之前，我们需要先将它安装到我们的项目中。可以通过以下命令来完成安装：
npm install keyframes-functions
使用
keyframes-functions 提供了丰富的 API，可以满足我们对于动画效果的多种需求。接下来，我们将通过一些具体的示例来了解这些 API 的具体使用方法。
cubicBezier()
cubicBezier() 函数是一个贝塞尔曲线函数。通过调整其中的四个参数，我们可以定义一个曲线，将其应用到动画中，使其变得更加自然流畅。下面是一个简单的示例：
-- -------------------- ---- -------
---------- ---- -
-- -
----- --
---------- ---------
-
--- -
----- ----
---------- -----------
-
---- -
----- -----
---------- ---------
-
-
---- -
---------- ---- -- ----------------- ----- ----- ----- ---------
-上面的代码中，我们定义了一个 move 动画，然后将 cubicBezier() 函数应用到了 animation 属性中。这里我们设置了一个 inifinite 属性，使得动画一直循环播放。
chain()
chain() 函数可以将多个动画函数串联起来，创建出一个复合动画。下面是一个简单的示例：
-- -------------------- ---- -------
---------- ------ -
-- -
---------- -------------
-
---- -
---------- ---------------
-
-
---------- ---- -
-- -
------ --
-
---- -
------ -----
-
-
---- -
---------- ------------ -- ------------ ---- -- ------------ ---------
-上面的代码中，我们先定义了两个动画函数 rotate 和 move，然后使用 chain() 函数将它们串联起来，创建出一个新的动画。我们可以看到，在 animation 属性中，我们可以直接使用 chain() 函数作为参数。
stagger()
stagger() 函数可以创建出相对于时间的错开动画效果。下面是一个简单的示例：
-- -------------------- ---- -------
---------- ---- -
-- -
---------- --------------
-
---- -
---------- ------------------
-
-
---- -
-------- -----
---------------- -------
-
---- --- -
------ -----
------- -----
----------------- -------
------- - -----
---------- ---- -- ----------------- ----- ----- -- ---------
-
---- ---------------- -
---------------- --------------
-
---- ---------------- -
---------------- --------------
-
---- ---------------- -
---------------- --------------
-
上面的代码中，我们使用 stagger() 函数在三个方块之间创建了一个时间错开的动画效果。我们可以看到，在 animation-delay 属性中，我们可以直接使用 stagger() 函数作为参数。
总结
keyframes-functions 是一个非常有用的 css 动画函数库，可以帮助我们更快地制作出复杂的动画效果。在实际项目中，我们可以根据具体需求，选择合适的 API 来使用。当然，在使用过程中，我们也需要注意一些细节问题，例如浏览器兼容性等等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066efe4c49986ca68d8b51