### Installation

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Provides instructions for installing the tailwindcss-animate plugin using npm and configuring it in the tailwind.config.js file.

```sh
npm install -D tailwindcss-animate
```

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        // ...
    },
    plugins: [
        require("tailwindcss-animate"),
        // ...
    ],
}
```

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

### Installation

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

Instructions for installing the tailwindcss-animate plugin using npm and adding it to the Tailwind CSS configuration file.

```sh
npm install -D tailwindcss-animate
```

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

### Basic Usage of Enter Animation Rotate

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-rotate.md

Demonstrates how to apply Tailwind CSS classes to set the starting rotation of enter animations on HTML elements. Includes examples for default and custom rotation values.

```html
<button class="animate-in spin-in ...">Button A</button>
<button class="animate-in spin-in-12 ...">Button B</button>
<button class="animate-in spin-in-45 ...">Button C</button>
<button class="animate-in spin-in-90 ...">Button C</button>
```

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

### Basic Usage of slide-in-from-* Utilities

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-translate.md

Demonstrates how to apply Tailwind CSS's slide-in animation utilities to set the starting translate direction and amount for enter animations. Includes examples for top, bottom, left, and right directions with different numerical values.

```html
<button class="animate-in slide-in-from-top ...">Button A</button>
<button class="animate-in slide-in-from-bottom-50 ...">Button B</button>
<button class="animate-in slide-in-from-left-75 ...">Button C</button>
<button class="animate-in slide-in-from-right-95 ...">Button C</button>
```

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

### Basic Enter Opacity Utilities

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-opacity.md

Applies different starting opacities to enter animations using Tailwind CSS utility classes.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in fade-in-25 ...">Button B</button>
<button class="animate-in fade-in-50 ...">Button C</button>
<button class="animate-in fade-in-75 ...">Button C</button>
```

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

### Basic Enter Animation Opacity

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-opacity.md

Applies different starting opacities to enter animations using Tailwind CSS utility classes.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in fade-in-25 ...">Button B</button>
<button class="animate-in fade-in-50 ...">Button C</button>
<button class="animate-in fade-in-75 ...">Button C</button>
```

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

### Tailwind CSS Configuration

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

Example of how to configure the tailwindcss-animate plugin in the `tailwind.config.js` file by requiring it in the plugins array.

```js
// @filename tailwind.config.js
module.exports = {
	theme: {
		// ...
	},
	plugins: [
		require("tailwindcss-animate"),
		// ...
	],
}
```

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

### Changing Enter Animation Starting Opacity

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

Define the starting opacity for enter animations using `fade-in-{amount}` utilities. This controls how an element fades in.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in fade-in-25 ...">Button B</button>
<button class="animate-in fade-in-50 ...">Button C</button>
<button class="animate-in fade-in-75 ...">Button C</button>
```

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

### Basic Animation Examples

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Demonstrates how to apply fade-in, zoom-in, and slide-out animations to elements using Tailwind CSS classes. It also shows how to control animation duration and delay.

```html
<div class="animate-in fade-in zoom-in">...</div>

<!-- 添加滑向左上方退出的动画-->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>

<!-- 控制动画持续时间 -->
<div class="... duration-300">...</div>

<!-- 控制动画延迟 -->
<div class="... delay-150">. 。</div>
```

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

### Changing Enter Animation Starting Translate

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Define the starting translation for enter animations with `slide-in-from-{direction}-{amount}` utilities. This allows elements to slide into view from specified directions and distances.

```html
<button class="animate-in slide-in-from-top ...">Button A</button>
<button class="animate-in slide-in-from-bottom-50 ...">Button B</button>
<button class="animate-in slide-in-from-left-75 ...">Button C</button>
<button class="animate-in slide-in-from-right-95 ...">Button C</button>
```

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

### Basic Enter Animation Rotation

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-rotate.md

Applies enter animations with specified starting rotations using Tailwind CSS utility classes.

```html
<button class="animate-in spin-in ...">Button A</button>
<button class="animate-in spin-in-12 ...">Button B</button>
<button class="animate-in spin-in-45 ...">Button C</button>
<button class="animate-in spin-in-90 ...">Button C</button>
```

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

### Customizing Opacity Scale in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-opacity.md

Example of extending the default opacity scale in `tailwind.config.js` to include custom values for animations.

```js
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            opacity: {
                67: ".67",
            },
        },
    },
}
```

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

### Changing Enter Animation Starting Opacity

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Control the initial opacity of an enter animation using `fade-in-{amount}` utilities. This allows for gradual fading effects as elements appear.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in fade-in-25 ...">Button B</button>
<button class="animate-in fade-in-50 ...">Button C</button>
<button class="animate-in fade-in-75 ...">Button C</button>
```

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

### Customizing Tailwind CSS Scale

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-scale.md

Example of how to extend the Tailwind CSS theme to include custom scale values for animations in the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			scale: {
				175: "1.75",
			},
		}
	},
}
```

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

### Changing Enter Animation Starting Translate

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

Define the starting position for enter animations using `slide-in-from-{direction}-{amount}` utilities. This controls the initial translation of the element.

```html
<button class="animate-in slide-in-from-top ...">Button A</button>
<button class="animate-in slide-in-from-bottom-48 ...">Button B</button>
<button class="animate-in slide-in-from-left-72 ...">Button C</button>
<button class="animate-in slide-in-from-right-96 ...">Button C</button>
```

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

### Basic Animation Usage

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

Demonstrates how to apply enter and exit animations using Tailwind CSS utility classes. Includes examples for fade, zoom, and slide animations.

```html
<div class="animate-in fade-in zoom-in">...</div>

<div class="animate-out slide-out-to-top slide-out-to-left">...</div>
```

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

### Changing Enter Animation Starting Scale

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

Control the starting scale of enter animations with `zoom-in-{amount}` utilities. This determines how much the element scales up initially.

```html
<button class="animate-in zoom-in ...">Button A</button>
<button class="animate-in zoom-in-50 ...">Button B</button>
<button class="animate-in zoom-in-75 ...">Button C</button>
<button class="animate-in zoom-in-95 ...">Button C</button>
```

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

### Basic Enter Scale Usage

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-scale.md

Demonstrates how to apply different starting scales to enter animations using Tailwind's `zoom-in-{amount}` utilities. These classes directly control the `--tw-enter-scale` CSS property.

```html
<button class="animate-in zoom-in ...">Button A</button>
<button class="animate-in zoom-in-50 ...">Button B</button>
<button class="animate-in zoom-in-75 ...">Button C</button>
<button class="animate-in zoom-in-95 ...">Button C</button>
```

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

### Changing Enter Animation Starting Rotation

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

Set the starting rotation for enter animations using `spin-in-{amount}` utilities. This controls the initial rotation of the element.

```html
<button class="animate-in spin-in-1 ...">Button A</button>
<button class="animate-in spin-in-6 ...">Button B</button>
<button class="animate-in spin-in-75 ...">Button C</button>
<button class="animate-in spin-in-90 ...">Button C</button>
```

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

### Changing Enter Animation Starting Rotation

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Customize the initial rotation of an enter animation with `spin-in-{amount}` utilities. This enables effects like elements spinning into view.

```html
<button class="animate-in spin-in-1 ...">Button A</button>
<button class="animate-in spin-in-6 ...">Button B</button>
<button class="animate-in spin-in-75 ...">Button C</button>
<button class="animate-in spin-in-90 ...">Button C</button>
```

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

### Changing Enter Animation Starting Scale

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Adjust the initial scale of an enter animation using `zoom-in-{amount}` utilities. This provides control over zoom-in effects for appearing elements.

```html
<button class="animate-in zoom-in ...">Button A</button>
<button class="animate-in zoom-in-50 ...">Button B</button>
<button class="animate-in zoom-in-75 ...">Button C</button>
<button class="animate-in zoom-in-95 ...">Button C</button>
```

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

### Basic Slide-in Animation Usage

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-translate.md

Demonstrates how to apply Tailwind CSS's `animate-in` and `slide-in-from-*` utility classes to elements to create slide-in animations with different starting positions.

```html
<button class="animate-in slide-in-from-top ...">Button A</button>
<button class="animate-in slide-in-from-bottom-50 ...">Button B</button>
<button class="animate-in slide-in-from-left-75 ...">Button C</button>
<button class="animate-in slide-in-from-right-95 ...">Button C</button>
```

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

### Animation Duration Utilities

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

Shows examples of `duration-{amount}` utilities for controlling the `animation-duration` property. Different amounts can be applied to adjust the animation speed.

```html
<button class="animate-bounce duration-150 ...">Button A</button>
<button class="animate-bounce duration-300 ...">Button B</button>
<button class="animate-bounce duration-700 ...">Button C</button>
```

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

### Animation Play State Utilities

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

Illustrates the use of `running` and `paused` utilities to control the `animation-play-state` of an element, allowing animations to be started or stopped.

```html
<button class="animate-bounce running ...">Button B</button>
<button class="animate-bounce paused ...">Button A</button>
```

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

### Customizing Animation Delay in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/animation-delay.md

Provides an example of how to extend the default animation delay values in the `tailwind.config.js` file.

```javascript
module.exports = {
    theme: {
        extend: {
            animationDelay: {
                "2s": "2s",
            },
        },
    },
}
```

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

### Customizing Animation Delay in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-delay.md

Provides an example of how to extend the default animation delay values in the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			animationDelay: {
				"2s": "2s",
			},
		},
	},
}
```

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

### Animation Delay Utilities

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

Demonstrates the use of `delay-{amount}` utilities to control the `animation-delay` property of an element. Examples show different delay values.

```html
<button class="animate-bounce delay-150 duration-300 ...">Button A</button>
<button class="animate-bounce delay-300 duration-300 ...">Button B</button>
<button class="animate-bounce delay-700 duration-300 ...">Button C</button>
```

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

### Tailwind CSS Enter Scale Utilities

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-scale.md

Defines CSS custom properties for controlling the enter animation scale. These utilities are applied to elements to set their starting scale during an entrance animation.

```html
<button class="animate-in zoom-in ...">Button A</button>
<button class="animate-in zoom-in-50 ...">Button B</button>
<button class="animate-in zoom-in-75 ...">Button C</button>
<button class="animate-in zoom-in-95 ...">Button C</button>
```

```html
<div class="animate-bounce zoom-in-75 hover:zoom-in-50">
	<!-- -->
</div>
```

```html
<div class="animate-bounce zoom-in-75 md:zoom-in-50">
	<!-- -->
</div>
```

```html
<div class="zoom-in-[1.75]">
	<!-- -->
</div>
```

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

### Animation Iteration Count Utilities

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

Provides examples of `repeat-{amount}` utilities to set the `animation-iteration-count`. This allows controlling how many times an animation should play, including infinite.

```html
<button class="animate-bounce repeat-0 ...">Button A</button>
<button class="animate-bounce repeat-1 ...">Button B</button>
<button class="animate-bounce repeat-infinite ...">Button C</button>
```

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

### Customizing Animation Scale in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-scale.md

Provides an example of how to extend the default animation scale values in the `tailwind.config.js` file. This allows for custom scale values to be used throughout the project.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            scale: {
                175: "1.75",
            },
        },
    },
}
```

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

### Customizing Animation Fill Mode in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-fill-mode.md

Provides an example of how to extend the default animation fill mode utilities in the `tailwind.config.js` file to include custom values.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			animationDirection: {
				"forwards-backwards": "forwards, backwards",
			},
		},
	},
}
```

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

### Tailwind CSS Enter Translate Utilities

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-translate.md

These Tailwind CSS utility classes are used to define the starting position for enter animations. They manipulate the `--tw-enter-translate-x` and `--tw-enter-translate-y` CSS variables to control the translation effect. Each class corresponds to a specific direction and magnitude of translation.

```css
/* Slide in from top */
.slide-in-from-top { --tw-enter-translate-x: -100%; }
.slide-in-from-top-0 { --tw-enter-translate-x: -0px; }
.slide-in-from-top-px { --tw-enter-translate-x: -1px; }
.slide-in-from-top-0.5 { --tw-enter-translate-x: -0.125rem; }
.slide-in-from-top-1 { --tw-enter-translate-x: -0.25rem; }
.slide-in-from-top-1.5 { --tw-enter-translate-x: -0.375rem; }
.slide-in-from-top-2 { --tw-enter-translate-x: -0.5rem; }
.slide-in-from-top-2.5 { --tw-enter-translate-x: -0.625rem; }
.slide-in-from-top-3 { --tw-enter-translate-x: -0.75rem; }
.slide-in-from-top-3.5 { --tw-enter-translate-x: -0.875rem; }
.slide-in-from-top-4 { --tw-enter-translate-x: -1rem; }
.slide-in-from-top-5 { --tw-enter-translate-x: -1.25rem; }
.slide-in-from-top-6 { --tw-enter-translate-x: -1.5rem; }
.slide-in-from-top-7 { --tw-enter-translate-x: -1.75rem; }
.slide-in-from-top-8 { --tw-enter-translate-x: -2rem; }
.slide-in-from-top-9 { --tw-enter-translate-x: -2.25rem; }

/* Slide in from bottom */
.slide-in-from-bottom { --tw-enter-translate-x: 100%; }
.slide-in-from-bottom-0 { --tw-enter-translate-x: 0px; }
.slide-in-from-bottom-px { --tw-enter-translate-x: 1px; }
.slide-in-from-bottom-0.5 { --tw-enter-translate-x: 0.125rem; }
.slide-in-from-bottom-1 { --tw-enter-translate-x: 0.25rem; }
.slide-in-from-bottom-1.5 { --tw-enter-translate-x: 0.375rem; }
.slide-in-from-bottom-2 { --tw-enter-translate-x: 0.5rem; }
.slide-in-from-bottom-2.5 { --tw-enter-translate-x: 0.625rem; }
.slide-in-from-bottom-3 { --tw-enter-translate-x: 0.75rem; }
.slide-in-from-bottom-3.5 { --tw-enter-translate-x: 0.875rem; }
.slide-in-from-bottom-4 { --tw-enter-translate-x: 1rem; }
.slide-in-from-bottom-5 { --tw-enter-translate-x: 1.25rem; }
.slide-in-from-bottom-6 { --tw-enter-translate-x: 1.5rem; }
.slide-in-from-bottom-7 { --tw-enter-translate-x: 1.75rem; }
.slide-in-from-bottom-8 { --tw-enter-translate-x: 2rem; }
.slide-in-from-bottom-9 { --tw-enter-translate-x: 2.25rem; }

/* Slide in from left */
.slide-in-from-left { --tw-enter-translate-y: -100%; }
.slide-in-from-left-0 { --tw-enter-translate-y: -0px; }
.slide-in-from-left-px { --tw-enter-translate-y: -1px; }
.slide-in-from-left-0.5 { --tw-enter-translate-y: -0.125rem; }
.slide-in-from-left-1 { --tw-enter-translate-y: -0.25rem; }
.slide-in-from-left-1.5 { --tw-enter-translate-y: -0.375rem; }
.slide-in-from-left-2 { --tw-enter-translate-y: -0.5rem; }
.slide-in-from-left-2.5 { --tw-enter-translate-y: -0.625rem; }
.slide-in-from-left-3 { --tw-enter-translate-y: -0.75rem; }
.slide-in-from-left-3.5 { --tw-enter-translate-y: -0.875rem; }
.slide-in-from-left-4 { --tw-enter-translate-y: -1rem; }
.slide-in-from-left-5 { --tw-enter-translate-y: -1.25rem; }
.slide-in-from-left-6 { --tw-enter-translate-y: -1.5rem; }
.slide-in-from-left-7 { --tw-enter-translate-y: -1.75rem; }
.slide-in-from-left-8 { --tw-enter-translate-y: -2rem; }
.slide-in-from-left-9 { --tw-enter-translate-y: -2.25rem; }

/* Slide in from right */
.slide-in-from-right { --tw-enter-translate-y: 100%; }
.slide-in-from-right-0 { --tw-enter-translate-y: 0px; }
.slide-in-from-right-px { --tw-enter-translate-y: 1px; }
.slide-in-from-right-0.5 { --tw-enter-translate-y: 0.125rem; }
.slide-in-from-right-1 { --tw-enter-translate-y: 0.25rem; }
.slide-in-from-right-1.5 { --tw-enter-translate-y: 0.375rem; }
.slide-in-from-right-2 { --tw-enter-translate-y: 0.5rem; }
.slide-in-from-right-2.5 { --tw-enter-translate-y: 0.625rem; }
.slide-in-from-right-3 { --tw-enter-translate-y: 0.75rem; }
.slide-in-from-right-3.5 { --tw-enter-translate-y: 0.875rem; }
.slide-in-from-right-4 { --tw-enter-translate-y: 1rem; }
.slide-in-from-right-5 { --tw-enter-translate-y: 1.25rem; }
.slide-in-from-right-6 { --tw-enter-translate-y: 1.5rem; }
.slide-in-from-right-7 { --tw-enter-translate-y: 1.75rem; }
.slide-in-from-right-8 { --tw-enter-translate-y: 2rem; }
.slide-in-from-right-9 { --tw-enter-translate-y: 2.25rem; }

```

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

### Basic Enter Animations

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation.md

Demonstrates how to apply basic enter animations like fade-in, spin-in, zoom-in, and slide-in-from using Tailwind CSS utility classes.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-from-top ...">Button D</button>
<button class="animate-in slide-in-from-left ...">Button E</button>
```

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

### Basic Enter Animations

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation.md

Demonstrates how to apply basic enter animations like fade-in, spin-in, zoom-in, and slide-in-from using Tailwind CSS utility classes.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-from-top ...">Button D</button>
<button class="animate-in slide-in-from-left ...">Button E</button>
```

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

### Customizing Animation Direction in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/animation-direction.md

Provides an example of how to extend or override the default animation direction utilities in the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            animationDirection: {
                "normal-reverse": "normal, reverse",
            },
        },
    },
}
```

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

### Customizing Animation Direction in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-direction.md

Provides an example of how to extend or override the default animation direction utilities in the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			animationDirection: {
				"normal-reverse": "normal, reverse",
			},
		},
	},
}
```

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

### Adding Enter Animations

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Apply enter animations to elements using the `animate-in` utility combined with specific animation types like `fade-in`, `spin-in`, `zoom-in`, and `slide-in-from-{direction}`. These utilities control how an element appears on the screen.

```html
<button class="animate-in fade-in ...">Button A</button>
<button class="animate-in spin-in ...">Button B</button>
<button class="animate-in zoom-in ...">Button C</button>
<button class="animate-in slide-in-from-top ...">Button D</button>
<button class="animate-in slide-in-from-left ...">Button E</button>
```

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

### Changing Animation Timing Function

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Illustrates how to set the animation timing function using `ease-{keyword}` utilities, including linear, ease-in, ease-out, and ease-in-out.

```html
<button class="animate-bounce ease-linear ...">Button A</button>
<button class="animate-bounce ease-in ...">Button B</button>
<button class="animate-bounce ease-out ...">Button C</button>
<button class="animate-bounce ease-in-out ...">Button C</button>
```

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

### Conditional Enter Opacity with Breakpoints

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-opacity.md

Shows how to apply enter animation opacity utilities responsively using breakpoint modifiers.

```html
<div class="animate-bounce fade-in-25 md:fade-in-50">
    <!-- -->
</div>
```

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

### Responsive Exit Animation Scale with Breakpoints

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-scale.md

Illustrates applying exit animation scale utilities responsively using breakpoint prefixes like `md:`. This enables different exit scales at different screen sizes.

```html
<div class="animate-bounce zoom-out-75 md:zoom-out-50">
	<!-- ... -->
</div>
```

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

### Conditional Enter Opacity with States

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-opacity.md

Demonstrates applying enter animation opacity utilities conditionally based on states like hover.

```html
<div class="animate-bounce fade-in-25 hover:fade-in-50">
    <!-- -->
</div>
```

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

### Customizing Exit Animation Scale in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/exit-animation-scale.md

Provides an example of how to customize the animation scale values in the `tailwind.config.js` file by extending the default theme.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            scale: {
                175: "1.75",
            },
        },
    },
}
```

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

### Customizing Animation Iteration Count in Tailwind

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/animation-iteration-count.md

Provides an example of how to extend the default `animation-iteration-count` utilities in a Tailwind CSS project by modifying the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            animationIterationCount: {
                2: "2",
            },
        },
    },
}
```

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

### Basic Animation Delay Usage

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-delay.md

Demonstrates how to apply animation delay utilities to elements using HTML classes.

```html
<button class="animate-bounce delay-150 duration-300 ...">Button A</button>
<button class="animate-bounce delay-300 duration-300 ...">Button B</button>
<button class="animate-bounce delay-700 duration-300 ...">Button C</button>
```

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

### Changing Animation Play State

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Demonstrates how to control the animation's play state using the `running` and `paused` utility classes.

```html
<button class="animate-bounce running ...">Button B</button>
<button class="animate-bounce paused ...">Button A</button>
```

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

### Conditional Enter Animations (Breakpoints)

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation.md

Demonstrates applying enter animations conditionally based on screen size using Tailwind CSS's responsive variant modifiers.

```html
<div class="md:animate-in ...">
    <!-- ... -->
</div>
```

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

### Customizing Animation Iteration Count in Tailwind

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-iteration-count.md

Provides an example of how to extend Tailwind's default theme to include custom `animation-iteration-count` values in the `tailwind.config.js` file.

```javascript
module.exports = {
	theme: {
		extend: {
			animationIterationCount: {
				2: "2",
			}
		},
	}
}
```

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

### Changing Animation Fill Mode

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/README.md

Explains how to set the animation fill mode using `fill-mode-{keyword}` utilities, including none, forwards, backwards, and both.

```html
<button class="animate-bounce fill-mode-none ...">Button A</button>
<button class="animate-bounce fill-mode-forwards ...">Button B</button>
<button class="animate-bounce fill-mode-backwards ...">Button C</button>
<button class="animate-bounce fill-mode-both ...">Button C</button>
```

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

### Customizing Animation Fill Mode in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/animation-fill-mode.md

Provides an example of how to extend the Tailwind CSS theme to include custom animation fill mode values in the `tailwind.config.js` file.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            animationDirection: {
                "forwards-backwards": "forwards, backwards",
            },
        },
    },
}
```

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

### Arbitrary Enter Opacity Value

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-opacity.md

Applies an arbitrary enter animation opacity value using square bracket notation in Tailwind CSS.

```html
<div class="fade-in-[.67]">
    <!-- -->
</div>
```

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

### Conditional Enter Animations (Breakpoints)

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation.md

Demonstrates applying enter animations conditionally based on responsive breakpoints using Tailwind's variant modifiers.

```html
<div class="md:animate-in ...">
	<!-- -->
</div>
```

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

### Customizing Tailwind CSS Animation Scale

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-scale.md

Provides an example of how to extend the default Tailwind CSS animation scale in the `tailwind.config.js` file. This allows for custom scale values beyond the defaults.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			scale: {
				175: "1.75",
			},
		},
	},
}
```

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

### Customizing Theme: Opacity Scale

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/exit-animation-opacity.md

Provides an example of how to customize the default opacity scale in `tailwind.config.js` by extending the `theme.opacity` or `theme.extend.opacity` properties. This makes custom opacity values available as animation opacities.

```javascript
// @filename tailwind.config.js
module.exports = {
    theme: {
        extend: {
            opacity: {
                67: ".67",
            },
        },
    },
}
```

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

### Animation Fill Mode Utilities

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

Demonstrates the `fill-mode-{keyword}` utilities for controlling the `animation-fill-mode` property. Options include none, forwards, backwards, and both.

```html
<button class="animate-bounce fill-mode-none ...">Button A</button>
<button class="animate-bounce fill-mode-forwards ...">Button B</button>
<button class="animate-bounce fill-mode-backwards ...">Button C</button>
<button class="animate-bounce fill-mode-both ...">Button C</button>
```

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

### Using Arbitrary Values for Tailwind Translate

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-translate.md

This example shows how to use arbitrary values for Tailwind CSS translations directly in your HTML. This is useful for one-off values that don't need to be part of the theme.

```html
<div class="slide-out-to-left-[17rem]">
	<!-- ... -->
</div>
```

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

### Customizing Opacity Scale in Tailwind Config

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/exit-animation-opacity.md

Provides an example of how to customize the default opacity scale in `tailwind.config.js` by extending the `theme.opacity` or `theme.extend.opacity` properties. This allows for custom opacity values to be used with animation utilities.

```javascript
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			opacity: {
				67: ".67",
			},
		},
	},
}
```

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

### Basic Animation Delay Usage

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/animation-delay.md

Demonstrates how to apply animation delay utilities to elements using HTML classes.

```html
<button class="animate-bounce delay-150 duration-300 ...">Button A</button>
<button class="animate-bounce delay-300 duration-300 ...">Button B</button>
<button class="animate-bounce delay-700 duration-300 ...">Button C</button>
```

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

### Customizing Animation Rotate in Tailwind

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-rotate.md

Illustrates how to extend Tailwind CSS's default animation rotation values by modifying the `tailwind.config.js` file. Includes examples for both general rotation and specific animation rotation customization.

```js
// @filename tailwind.config.js
module.exports = {
	theme: {
		extend: {
			rotate: {
				175: "175deg",
			},
		},
	},
}
```

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

### Arbitrary Values for Enter Animation Rotate

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/enter-animation-rotate.md

Demonstrates the use of arbitrary values in Tailwind CSS to apply one-off enter animation rotation values directly within the HTML markup using square bracket notation.

```html
<div class="spin-in-[175deg]">
	<!-- -->
</div>
```

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

### Conditional Enter Scale with States

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/zh/docs/enter-animation-scale.md

Shows how to apply enter scale utilities conditionally based on states like hover or focus using Tailwind's variant modifiers. For example, `hover:zoom-in-50` applies the scale only on hover.

```html
<div class="animate-bounce zoom-in-75 hover:zoom-in-50">
    <!-- ... -->
</div>
```

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

### Basic Animation Play State

Source: https://github.com/jamiebuilds/tailwindcss-animate/blob/main/docs/animation-play-state.md

Demonstrates the basic usage of `running` and `paused` utility classes to control an element's animation play state.

```html
<button class="animate-bounce running ...">Button B</button>
<button class="animate-bounce paused ...">Button A</button>
```