animate.css/docsSource/sections/02-utilities.md

## Utility classes

Animate.css comes packed with a few utility classes to simplify its use.

### Delay classes

You can add delays directly on the element's class attribute, just like this:

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

Animate.css provides the following delays:

| Class name          | Default delay time |
| ------------------- | ------------------ |
| `animate__delay-2s` | `2s`               |
| `animate__delay-3s` | `3s`               |
| `animate__delay-4s` | `4s`               |
| `animate__delay-5s` | `5s`               |

The provided delays are from 1 to 5 seconds. You can customize them setting the `--animate-delay` property to a longer or a shorter duration:

```css
/* All delay classes will take 2x longer to start */
:root {
  --animate-delay: 2s;
}

/* All delay classes will take half the time to start */
:root {
  --animate-delay: 0.5s;
}
```

### Slow, slower, fast, and Faster classes

You can control the speed of the animation by adding these classes, as below:

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

| Class name        | Default speed time |
| ----------------- | ------------------ |
| `animate__slow`   | `2s`               |
| `animate__slower` | `3s`               |
| `animate__fast`   | `800ms`            |
| `animate__faster` | `500ms`            |

The `animate__animated` class has a default speed of `1s`. You can also customize the animations duration through the `--animate-duration` property, globally or locally. This will affect both the animations and the utility classes. Example:

```css
/* All animations will take twice as long to finish */
:root {
  --animate-duration: 2s;
}

/* Only this element will take half the time to finish */
.my-element {
  --animate-duration: 0.5s;
}
```

Notice that some animations have a duration of less than 1 second. As we used the CSS `calc()` function, setting the duration through the `--animation-duration` property will respect these ratios. So, when you change the global duration, all the animations will respond to that change!

### Repeating classes

You can control the iteration count of the animation by adding these classes, like below:

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

| Class Name          | Default iteration count |
| ------------------- | ----------------------- |
| `animate__repeat-1` | `1`                     |
| `animate__repeat-2` | `2`                     |
| `animate__repeat-3` | `3`                     |
| `animate__infinite` | `infinite`              |

As with the delay and speed classes, the `animate__repeat` class is based on the `--animate-repeat` property and has a default iteration count of `1`. You can customize them by setting the `--animate-repeat` property to a longer or a shorter value:

```css
/* The element will repeat the animation 2x
   It's better to set this property locally and not globally or
   you might end up with a messy situation */
.my-element {
  --animate-repeat: 2;
}
```

Notice that `animate__infinite` doesn't use any custom property, and changes to `--animate-repeat` will have no effect. Don't forget to read the [best practices](#best-practices) section to make the best use of repeating animations.