Velocity.js是否已停止维护？自定义序列动画无法运行求助

我发现了anime.js，它不仅比Velocity.js的文档完善得多，还自带序列动画功能，且能正常运行。我打算切换到该库，但仍保留此问题，希望有人能解释我的代码为何无法运行。

我在尝试使用Velocity.js和Velocity UI时不断遇到问题，我的环境只是基础jQuery环境，没有Node.js、Angular等复杂框架。

Velocity的文档十分零散，我找到了三四种调用Velocity UI序列功能的方法，但没有一种能生效。

我按顺序加载了jQuery、Velocity、Velocity UI，且能通过控制台打印各库的特定对象确认它们已按顺序加载。

<!-- JQuery -->
<script src="https://code.jquery.com/jquery-3.7.0.min.js"
     integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g="
     crossorigin="anonymous"
     rel="preload">
</script>
<!-- Scripts -->
<script src="./inc/scripts/app/lib/velocity.min.js"></script>
<script src="./inc/scripts/app/lib/velocity.ui.min.js"></script>

以下是唯一不会抛出错误的写法，但完全没有效果……

$div = document.getElementsByTagName('div');

$.Velocity.Sequences.hover = function (element, options) {
    var duration = options.duration || 750;

    $.Velocity.animate(element,
        { 
        top: "-=10px",
        }, { 
        /* Delay is relative to user-adjustable duration. */
        delay: duration * 0.033,
        duration: duration,
        loop: 3,
        easing: "easeInOutSine"
        });
};

$div.velocity("hover");

完全没有任何效果。相关对象存在，'hover'函数也在Velocity.Sequences对象中，但就是无法运行。

是我的写法有误吗？我尝试过使用$.Velocity和Velocity两种方式，绕过jQuery调用，所以我很确定不是jQuery兼容性问题。

Velocity是不是已经停止维护了？

如果是后者，有没有替代它的新库？我试过transit，它能正常运行，但我对Velocity UI的序列功能很感兴趣。

有人让我提供无法运行的代码片段。以下代码来自css tricks，该链接在Velocity UI文档中，是我找到的唯一不会抛出错误的序列功能使用方法。

以下是针对节点列表的代码……

$div = document.getElementsByTagName('div');

$.Velocity.Sequences.hover = function(element, options) {
  var duration = options.duration || 750;

  $.Velocity.animate(element, {
    translateY: "-=10px",
  }, {
    /* Delay is relative to user-adjustable duration. */
    delay: duration * 0.033,
    duration: duration,
    loop: 3,
    easing: "easeInOutSine"
  });
};

$div.velocity("hover");

#box {
  width: 120px;
  height: 120px;
  background-color: silver;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>
</head>

<body>
  <div id="box"></div>
</body>
</html>

以下是针对jQuery对象$('div')的代码片段

$.Velocity.Sequences.hover = function(element, options) {
  var duration = options.duration || 750;

  $.Velocity.animate(element, {
    translateY: "-=10px",
  }, {
    /* Delay is relative to user-adjustable duration. */
    delay: duration * 0.033,
    duration: duration,
    loop: 3,
    easing: "easeInOutSine"
  });
};

$('div').velocity('hover');

#box {
  width: 120px;
  height: 120px;
  background-color: silver;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>
</head>

<body>
  <div id='box'></div>
</body>

</html>

以及针对jQuery对象$('#box')的代码片段……

$.Velocity.Sequences.hover = function(element, options) {
  var duration = options.duration || 750;

  $.Velocity.animate(element, {
    translateY: "-=10px",
  }, {
    /* Delay is relative to user-adjustable duration. */
    delay: duration * 0.033,
    duration: duration,
    loop: 3,
    easing: "easeInOutSine"
  });
};

$('#box').velocity('hover');

#box {
  width: 120px;
  height: 120px;
  background-color: silver;
}

<html>

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/velocity-animate@2.0/velocity.ui.min.js"></script>
</head>

<body>
  <div id='box'></div>
</body>

</html>

内容的提问来源于stack exchange，提问作者FEERspreads