### Install Animate.css with Yarn

Source: https://github.com/animate-css/animate.css/blob/main/README.md

Use this command to install Animate.css as a dependency in your project using Yarn.

```shell
yarn add animate.css
```

--------------------------------

### Start Custom Build Process

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md

After modifying the source files or configuration, run `npm start` to compile your custom build. This command generates `animate.css`, `animate.min.css`, and `animate.compat.css`.

```shell
npm start
```

--------------------------------

### Install Dependencies for Custom Build

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md

Clone the Animate.css repository and install the necessary npm dependencies to begin creating custom builds.

```shell
git clone https://github.com/animate-css/animate.css.git
cd animate.css
npm install
```

--------------------------------

### Install Animate.css with npm

Source: https://github.com/animate-css/animate.css/blob/main/README.md

Use this command to install Animate.css as a dependency in your project using npm.

```shell
npm install animate.css --save
```

--------------------------------

### Apply Animation Delay Class

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Use delay classes like `animate__delay-2s` to set a specific delay before an animation starts. The default delays range from 1 to 5 seconds.

```html
<div class="animate__animated animate__bounce animate__delay-2s">Example</div>
```

--------------------------------

### Disabling Animations with prefers-reduced-motion

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/03-best-practices.md

This CSS-only example demonstrates how to respect the user's preference for reduced motion, a critical accessibility feature. It ensures animations are disabled when the user has opted out via their OS settings.

```css
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  html:focus-within {
    scroll-behavior: auto;
  }

  *, *::before, *::after {
    animation-dashoffset: 1;
  }
}
```

--------------------------------

### Change Default Class Prefix

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md

Modify the `prefix` property within the `animateConfig` object in the `package.json` file to customize the default class prefix for your build. After changing the prefix, run `npm start` to rebuild the library.

```json
/* on Animate.css package.json */
"animateConfig": {
  "prefix": "myCustomPrefix__"
},
```

--------------------------------

### Customize Animation Duration with CSS Variables

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Modify animation properties like duration using CSS custom properties. This example shows how to change the duration for a specific bounce animation.

```css
/* This only changes this particular animation duration */
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}
```

--------------------------------

### Using the Animate CSS Utility Function

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Demonstrates how to use the `animateCSS` utility function to apply animations and handle their completion. It shows both basic usage and usage with a Promise chain.

```javascript
animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});

```

--------------------------------

### Import Specific Animations for Custom Build

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

To create a lean custom build, edit the './source/animate.css' file and import only the desired animations by uncommenting their respective lines.

```css
@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';

```

--------------------------------

### Using the Animation Utility Function

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md

Demonstrates how to invoke the `animateCSS` utility function to apply an animation. The `.then()` block can be used to execute code after the animation concludes.

```javascript
animateCSS('.my-element', 'bounce');

// or
animateCSS('.my-element', 'bounce').then((message) => {
  // Do something after the animation
});
```

--------------------------------

### Rebuild Animate.css

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

After modifying the package.json configuration, use this command to rebuild the Animate.css library with your custom settings.

```bash
$ npm start
```

--------------------------------

### Import Specific Animations

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/07-custom-builds.md

To create a custom build with only specific animations, edit the `./source/animate.css` file. Remove existing `@import` statements and add only the desired animation imports.

```css
@import 'attention_seekers/bounce.css';
@import 'attention_seekers/flash.css';
@import 'attention_seekers/pulse.css';
@import 'attention_seekers/rubberBand.css';
@import 'attention_seekers/shake.css';
@import 'attention_seekers/headShake.css';
@import 'attention_seekers/swing.css';
@import 'attention_seekers/tada.css';
@import 'attention_seekers/wobble.css';
@import 'attention_seekers/jello.css';
@import 'attention_seekers/heartBeat.css';
```

--------------------------------

### Animating a Main Element

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/03-best-practices.md

When needing to animate root elements like the body, wrap your content in a container and animate that instead to avoid potential browser bugs.

```html
<body>
  <main class="animate__animated animate__fadeInLeft">
    <!-- Your code -->
  </main>
</body>
```

--------------------------------

### Update Bundler Import for Compatibility

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/06-migration.md

When using a bundler, change your import statement to use the compatibility CSS file to maintain the old class naming convention.

```javascript
import 'animate.compat.css';
```

--------------------------------

### Listen for Animation End

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md

Attach an event listener to detect when an animation has finished. This allows for sequential animations or cleanup actions.

```javascript
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});
```

--------------------------------

### Apply Animation Speed Class

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Control animation speed using classes like `animate__faster`. The default speeds are `animate__slow` (2s), `animate__slower` (3s), `animate__fast` (800ms), and `animate__faster` (500ms).

```html
<div class="animate__animated animate__bounce animate__faster">Example</div>
```

--------------------------------

### Set Global Animation Properties with CSS Variables

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Define global animation properties such as duration and delay using CSS custom properties within the `:root` selector for consistent effects across all animations.

```css
/* This changes all the animations globally */
:root {
  --animate-duration: 800ms;
  --animate-delay: 0.9s;
}
```

--------------------------------

### Apply Basic Animation to HTML Element

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Add the `animate__animated` class along with an animation name (e.g., `animate__bounce`) to any HTML element to apply a CSS animation.

```html
<h1 class="animate__animated animate__bounce">An animated element</h1>
```

--------------------------------

### Include Animate.css via CDN

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Link to the Animate.css stylesheet in the <head> of your HTML document using a CDN for direct web page integration.

```html
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
  />
</head>
```

--------------------------------

### Import Animate.css in JavaScript

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Import the Animate.css stylesheet directly into your JavaScript file for use with module bundlers.

```javascript
import 'animate.css';
```

--------------------------------

### Apply Animation Repeat Class

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Control the number of times an animation repeats using classes like `animate__repeat-2`. Available options include `animate__repeat-1`, `animate__repeat-2`, `animate__repeat-3`, and `animate__infinite`.

```html
<div class="animate__animated animate__bounce animate__repeat-2">Example</div>
```

--------------------------------

### Update CDN Link for Compatibility

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/06-migration.md

For CDN usage, update the stylesheet link in your HTML to point to the compatibility CSS file from Animate.css v4.

```html
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>
```

--------------------------------

### Use Animate.css Animations with @keyframes

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Directly utilize Animate.css's @keyframes animations within your CSS for flexible integration without altering HTML structure. Ensure to set the `animation-duration`.

```css
.my-element {
  display: inline-block;
  margin: 0 0.5rem;

  animation: bounce; /* referring directly to the animation's @keyframe declaration */
  animation-duration: 2s; /* don't forget to set a duration! */
}
```

--------------------------------

### Add Animation Classes

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Add 'animate__animated' and a specific animation class to an element to trigger an animation. This is the basic step to apply any animation from the library.

```javascript
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

```

--------------------------------

### Update CDN Link for Animate.css v4

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

For CDN users, update the stylesheet link in your HTML to point to the 'animate.compat.css' file from version 4.0.0 or later to maintain compatibility with older versions.

```html
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css"
  />
</head>

```

```html
<head>
  <link
    rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.0.0/animate.compat.css"
  />
</head>

```

--------------------------------

### Utility Function for Animations

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md

A reusable Javascript function to add animation classes, handle the animation end, and remove classes automatically. It returns a Promise that resolves when the animation completes.

```javascript
const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });
```

--------------------------------

### Update npm Import for Animate.css v4

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

When migrating to Animate.css v4 with a bundler, change your import statement from 'animate.min.css' to 'animate.compat.css' to use the version without class prefixes.

```javascript
import 'animate.min.css';

```

```javascript
import 'animate.compat.css';

```

--------------------------------

### Add Animation Classes

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md

Add animation classes to an element to trigger an animation. Ensure the element is selected correctly.

```javascript
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');
```

--------------------------------

### Customize Animation Delay

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Globally customize the delay for all delay classes by setting the `--animate-delay` CSS property. This allows for shorter or longer default delay times.

```css
:root {
  --animate-delay: 2s;
}
```

```css
:root {
  --animate-delay: 0.5s;
}
```

--------------------------------

### Animate CSS with a Promise-based Function

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

A utility function to apply Animate.css classes and automatically remove them after the animation completes, returning a Promise. This simplifies animation management in JavaScript.

```javascript
const animateCSS = (element, animation, prefix = 'animate__') =>
  // We create a Promise and return it
  new Promise((resolve, reject) => {
    const animationName = `${prefix}${animation}`;
    const node = document.querySelector(element);

    node.classList.add(`${prefix}animated`, animationName);

    // When the animation ends, we clean the classes and resolve the Promise
    function handleAnimationEnd(event) {
      event.stopPropagation();
      node.classList.remove(`${prefix}animated`, animationName);
      resolve('Animation ended');
    }

    node.addEventListener('animationend', handleAnimationEnd, {once: true});
  });

```

--------------------------------

### Detect Animation End

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Listen for the 'animationend' event to perform actions after an animation has completed. This is useful for chaining animations or updating the UI.

```javascript
const element = document.querySelector('.my-element');
element.classList.add('animate__animated', 'animate__bounceOutLeft');

element.addEventListener('animationend', () => {
  // do something
});

```

--------------------------------

### Dynamically Change Animation Duration with JavaScript

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/01-usage.md

Control animation timing dynamically by setting CSS custom properties on the document element using JavaScript. This allows for runtime adjustments to animation speeds.

```javascript
// All animations will take twice the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '2s');

// All animations will take half the time to accomplish
document.documentElement.style.setProperty('--animate-duration', '.5s');
```

--------------------------------

### Customize Animation Duration Locally

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Locally set the `--animate-duration` CSS variable on an element to control its specific animation speed.

```css
.my-element {
  --animate-duration: 0.5s;
}
```

--------------------------------

### Re-triggering Animations After First Run

Source: https://github.com/animate-css/animate.css/wiki/known-issues

If an animation does not re-trigger after its first execution, use a JavaScript library like Mootools to remove the animation class after a specified duration. This ensures the animation can be reapplied.

```javascript
setTimeout(function() {$('/*element's ID that had the animations*/').erase('class')},/*event animation(s total) duratation in miliseconds go here*/)
```

--------------------------------

### Customize Animation Duration Globally

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Globally set the `--animate-duration` CSS variable to change the default speed for all animations and speed utility classes.

```css
:root {
  --animate-duration: 2s;
}
```

--------------------------------

### Customize Animation Duration

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Globally or locally customize animation duration using the `--animate-duration` CSS property. This affects all animations and speed utility classes, respecting their ratios.

```css
:root {
  --animate-duration: 2s;
}
```

```css
.my-element {
  --animate-duration: 0.5s;
}
```

--------------------------------

### Customize Animation Repeat Count

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/02-utilities.md

Customize the iteration count for repeat classes by setting the `--animate-repeat` CSS property locally on an element. Note that `animate__infinite` is not affected by this property.

```css
.my-element {
  --animate-repeat: 2;
}
```

--------------------------------

### Set Custom Animation Duration

Source: https://github.com/animate-css/animate.css/blob/main/docsSource/sections/04-javascript.md

Override the default animation duration using CSS variables. This snippet sets the duration to 0.5 seconds.

```javascript
const element = document.querySelector('.my-element');
element.style.setProperty('--animate-duration', '0.5s');
```

--------------------------------

### Customize Animation Duration with CSS Variables

Source: https://github.com/animate-css/animate.css/blob/main/docs/index.html

Modify the duration of a specific animation by overriding the '--animate-duration' CSS custom property. This offers fine-grained control over animation timing.

```css
.animate__animated.animate__bounce {
  --animate-duration: 2s;
}
```

--------------------------------

### Preventing Pulse Animation from Moving Elements

Source: https://github.com/animate-css/animate.css/wiki/known-issues

The 'pulse' animation can cause div elements without defined widths to shift off-page. Apply 'display: inline-block' via CSS to resolve this layout issue.

```css
display: inline-block
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.