Animate.js是一个jQuery插件，允许您使用css实用程序类将基于Animate.css的CSS3动画动态应用于元素。

主要功能：

• 适用于最新的Animate.css（v4+）。
• 在滚动、单击、悬停、按键或页面加载时触发。
• 易于实现，无需任何JS调用。

请参阅实际操作：

如何使用它:

1.要开始，请在页面上包含最新版本的jQuery库、Animate.css和Animate.js。

<!-- Animate.css -->
<link rel="stylesheet" href="/path/to/cdn/animate.min.css" />
 
<!-- jQuery -->
<script src="/path/to/cdn/jquery.min.js"></script>
 
<!-- Animate.js -->
<script src="/path/to/cdn/animate.min.js"></script>

2.使用以下语法将您选择的动画应用于目标元素：ani_｛animationName｝（动画名称）.

<div class="ani_pulse">
  Pulse Animation
</div>

3.单击时触发动画。

<div class="ani_pulse aniUtil_onClick">
  Pulse Animation
</div>

4.鼠标悬停时触发动画。

<div class="ani_pulse onMouse">
  Pulse Animation
</div>
 
<!-- Repeat The Animation Until Mouseout -->
<div class="ani_pulse aniUtil_active onMouse aniUtil_onMouseRepeat">
  Pulse Animation
</div>

5.当元素滚动到视图中时触发动画。

<div class="ani_pulse aniUtil_dramatic">
  Pulse Animation
</div>

6.当可滚动容器中的元素变得可见时，为其制作动画。

<div class="aniUtil_scrollDiv">
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
  <div class="aniIn_pulse">
    Pulse Animation
  </div>
</div>

7.按下特定键时触发动画。

<div class="ani_pulse aniUtil_onKey-ArrowUp">
  Pulse Animation
</div>

8.确定是否重复动画。

<div class="ani_pulse aniUtil_active">
  Pulse Animation
</div>

9.它还提供了4个自定义动画，分别命名为“clickDisabled”、“tubeLight”、“aniCus_OutIn”和“aniCut_text”。

<button class="aniCus_clickDisabled">
  Click Me
</button>

<div class="aniCus_tubeLight aniUtil_active">
  tubeLight Animation
</div>

<div class="aniCus_OutIn-bounceOutLeft-bounceInRight aniUtil_active">
  tubeLight Animation
</div>

<div class="aniCus_text-fadeInLeft aniUtil_active aniUtil_active">
  aniCus_text Animation
</div>

10.API方法。

// disable all animations
aniUtil_disable(all);
 
// disable all custom animation
aniUtil_disable(custom);
 
// disable all attention seekers animations.
aniUtil_disable(seekers);
 
// disable all back in/Out animations
aniUtil_disable(back);
 
// disable all backIn animations
aniUtil_disable(backIn);
 
// disable all backOut animations
aniUtil_disable(backOut);
 
// disable all custom animation
aniUtil_disable(custom);
 
// enable all animations
aniUtil_enable(all);
 
// disable all custom animation
aniUtil_enable(custom);
 
// disable all attention seekers animations.
aniUtil_enable(seekers);
 
// enable all back in/Out animations
aniUtil_enable(back);
 
// enablee all backIn animations
aniUtil_enable(backIn);
 
// enable all backOut animations
aniUtil_enable(backOut);
 
// enable all custom animation
aniUtil_enable(custom);
 
// apply an animation to the target element
aniUtil_animate(object/selector/regex element, animation_class/es);
 
// disable animation on a specific element
aniUtil_inanimate(object/selector/regex element);
 
// reset animation on a specific element
aniUtil_reset(object/selector/regex element);
 
// flush animation classes from a specific element
aniUtil_flush(object/selector/regex element);

更新日志：

v2.13.5 (2021-12-04)

• 功能的可重用性有所增强。
• 添加了一个新的自定义动画。
• 增强了中断处理的进入标准。
• 增强了点击、悬停和按键时的戏剧性动画。
• 增强了关键动画的性能。

预览截图

将Animate.css动画动态应 元素 Animate.js