Animate.css is an attempt to make the animate css library dynamic, in the sense of controlling animations, the basic idea is to animate the element when we want, how we want, without having to change anything in the source library.

animate css examples, animate css github, animate css download, animate css on scroll, css animation generator, css animation library, css animation transition

How to make use of it:

1. To get started, include the latest version of the jQuery library, Animate.css, and Animate.js on the page.

<!-- 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. Apply an animation of your choice to the target element using the formula:

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

3. Play the animation on click.

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

4. Run the animation when the mouse is hovering.

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

5. Play the animation as the item scrolls into view.

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

6. Move items inside a scrollable container as they become visible.

<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. Play the animation when a certain key is pressed.

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

8. Determine if you want to repeat the animation.

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

9. It also provides 3 custom animations called “clickDisabled”, “tubeLight” and “aniCus_OutIn”.

<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>

10. API Methods.

// 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 the animation on your element
aniUtil_inanimate(object/selector/regex element);

Apply Animate.css Animations To Elements Dynamically, Animate.css-Dynamic Plugin/Github

See Demo And Download

Official Website(KodingKhurram): Click Here

This superior jQuery/javascript plugin is developed by KodingKhurram. For extra Advanced Usage, please go to the official website.