jamiebuilds · SneakySensei · Sep 23, 2023
diff --git a/README.md b/README.md
@@ -10,7 +10,7 @@
 <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
 
 <!-- Control animation duration -->
-<div class="... duration-300">...</div>
+<div class="... animation-duration-300">...</div>
 
 <!-- Control animation delay -->
 <div class="... delay-150">...</div>
@@ -43,26 +43,29 @@ module.exports = {
 
 ## Documentation
 
-- [Basic Usage](#basic-usage)
-  - [Changing animation delay](#changing-animation-delay)
-  - [Changing animation direction](#changing-animation-direction)
-  - [Changing animation duration](#changing-animation-duration)
-  - [Changing animation fill mode](#changing-animation-fill-mode)
-  - [Changing animation iteration count](#changing-animation-iteration-count)
-  - [Changing animation play state](#changing-animation-play-state)
-  - [Changing animation timing function](#changing-animation-timing-function)
-  - [Prefers-reduced-motion](#prefers-reduced-motion)
-- [Enter & Exit Animations](#enter-and-exit-animations)
-  - [Adding enter animations](#adding-enter-animations)
-  - [Adding exit animations](#adding-exit-animations)
-  - [Changing enter animation starting opacity](#changing-enter-animation-starting-opacity)
-  - [Changing enter animation starting rotation](#changing-enter-animation-starting-rotation)
-  - [Changing enter animation starting scale](#changing-enter-animation-starting-scale)
-  - [Changing enter animation starting translate](#changing-enter-animation-starting-translate)
-  - [Changing exit animation ending opacity](#changing-exit-animation-ending-opacity)
-  - [Changing exit animation ending rotation](#changing-exit-animation-ending-rotation)
-  - [Changing exit animation ending scale](#changing-exit-animation-ending-scale)
-  - [Changing exit animation ending translate](#changing-exit-animation-ending-translate)
+- [`tailwindcss-animate`](#tailwindcss-animate)
+  - [Installation](#installation)
+  - [Documentation](#documentation)
+    - [Basic Usage](#basic-usage)
+      - [Changing animation delay](#changing-animation-delay)
+      - [Changing animation direction](#changing-animation-direction)
+      - [Changing animation duration](#changing-animation-duration)
+      - [Changing animation fill mode](#changing-animation-fill-mode)
+      - [Changing animation iteration count](#changing-animation-iteration-count)
+      - [Changing animation play state](#changing-animation-play-state)
+      - [Changing animation timing function](#changing-animation-timing-function)
+      - [Prefers-reduced-motion](#prefers-reduced-motion)
+    - [Enter \& Exit Animations](#enter--exit-animations)
+    - [Adding enter animations](#adding-enter-animations)
+    - [Adding exit animations](#adding-exit-animations)
+      - [Changing enter animation starting opacity](#changing-enter-animation-starting-opacity)
+      - [Changing enter animation starting rotation](#changing-enter-animation-starting-rotation)
+      - [Changing enter animation starting scale](#changing-enter-animation-starting-scale)
+      - [Changing enter animation starting translate](#changing-enter-animation-starting-translate)
+      - [Changing exit animation ending opacity](#changing-exit-animation-ending-opacity)
+      - [Changing exit animation ending rotation](#changing-exit-animation-ending-rotation)
+      - [Changing exit animation ending scale](#changing-exit-animation-ending-scale)
+      - [Changing exit animation ending translate](#changing-exit-animation-ending-translate)
 
 ### Basic Usage
 
@@ -71,9 +74,15 @@ module.exports = {
 Use the `delay-{amount}` utilities to control an element’s `animation-delay`.
 
 ```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>
+<button class="animate-bounce delay-150 animation-duration-300 ...">
+	Button A
+</button>
+<button class="animate-bounce delay-300 animation-duration-300 ...">
+	Button B
+</button>
+<button class="animate-bounce delay-700 animation-duration-300 ...">
+	Button C
+</button>
 ```
 
 Learn more in the [animation delay](/docs/animation-delay.md) documentation.
@@ -93,12 +102,12 @@ Learn more in the [animation direction](/docs/animation-direction.md) documentat
 
 #### Changing animation duration
 
-Use the `duration-{amount}` utilities to control an element’s `animation-duration`.
+Use the `animation-duration-{amount}` utilities to control an element’s `animation-duration`.
 
 ```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>
+<button class="animate-bounce animation-duration-150 ...">Button A</button>
+<button class="animate-bounce animation-duration-300 ...">Button B</button>
+<button class="animate-bounce animation-duration-700 ...">Button C</button>
 ```
 
 Learn more in the [animation duration](/docs/animation-duration.md) documentation.

diff --git a/docs/animation-delay.md b/docs/animation-delay.md
@@ -22,9 +22,15 @@
 Use the `delay-{amount}` utilities to control an element’s `animation-delay`.
 
 ```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>
+<button class="animate-bounce delay-150 animation-duration-300 ...">
+	Button A
+</button>
+<button class="animate-bounce delay-300 animation-duration-300 ...">
+	Button B
+</button>
+<button class="animate-bounce delay-700 animation-duration-300 ...">
+	Button C
+</button>
 ```
 
 ## Applying Conditionally
@@ -34,7 +40,7 @@ Use the `delay-{amount}` utilities to control an element’s `animation-delay`.
 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:delay-0` to only apply the `delay-0` utility on hover.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 hover:delay-0">
+<div class="animate-bounce animation-duration-300 delay-150 hover:delay-0">
 	<!-- ... -->
 </div>
 ```
@@ -46,7 +52,7 @@ For a complete list of all available state modifiers, check out the [Hover, Focu
 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:delay-0` to apply the `delay-0` utility at only medium screen sizes and above.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 md:delay-0">
+<div class="animate-bounce animation-duration-300 delay-150 md:delay-0">
 	<!-- ... -->
 </div>
 ```

diff --git a/docs/animation-direction.md b/docs/animation-direction.md
@@ -29,7 +29,9 @@ Use the `direction-{keyword}` utilities to control an element’s `animation-del
 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:direction-normal` to only apply the `direction-normal` utility on hover.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 hover:direction-normal">
+<div
+	class="animate-bounce animation-duration-300 delay-150 hover:direction-normal"
+>
 	<!-- ... -->
 </div>
 ```
@@ -41,7 +43,9 @@ For a complete list of all available state modifiers, check out the [Hover, Focu
 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:direction-normal` to apply the `direction-normal` utility at only medium screen sizes and above.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 md:direction-normal">
+<div
+	class="animate-bounce animation-duration-300 delay-150 md:direction-normal"
+>
 	<!-- ... -->
 </div>
 ```

diff --git a/docs/animation-duration.md b/docs/animation-duration.md
@@ -2,39 +2,37 @@
 
 > Utilities for controlling the duration of CSS animations.
 
-| Class           | Properties                    |
-| --------------- | ----------------------------- |
-| `duration-75`   | `animation-duration: 75ms;`   |
-| `duration-100`  | `animation-duration: 100ms;`  |
-| `duration-150`  | `animation-duration: 150ms;`  |
-| `duration-200`  | `animation-duration: 200ms;`  |
-| `duration-300`  | `animation-duration: 300ms;`  |
-| `duration-500`  | `animation-duration: 500ms;`  |
-| `duration-700`  | `animation-duration: 700ms;`  |
-| `duration-1000` | `animation-duration: 1000ms;` |
-
-> **Note:** This is reusing the same classes as [`transition-duration`](https://tailwindcss.com/docs/transition-duration), this may change in the future if it turns out to cause friction.
+| Class                     | Properties                    |
+| ------------------------- | ----------------------------- |
+| `animation-duration-75`   | `animation-duration: 75ms;`   |
+| `animation-duration-100`  | `animation-duration: 100ms;`  |
+| `animation-duration-150`  | `animation-duration: 150ms;`  |
+| `animation-duration-200`  | `animation-duration: 200ms;`  |
+| `animation-duration-300`  | `animation-duration: 300ms;`  |
+| `animation-duration-500`  | `animation-duration: 500ms;`  |
+| `animation-duration-700`  | `animation-duration: 700ms;`  |
+| `animation-duration-1000` | `animation-duration: 1000ms;` |
 
 ## Basic Usage
 
 ### Changing animation duration
 
-Use the `duration-{amount}` utilities to control an element’s `animation-duration`.
+Use the `animation-duration-{amount}` utilities to control an element’s `animation-duration`.
 
 ```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>
+<button class="animate-bounce animation-duration-150 ...">Button A</button>
+<button class="animate-bounce animation-duration-300 ...">Button B</button>
+<button class="animate-bounce animation-duration-700 ...">Button C</button>
 ```
 
 ## Applying Conditionally
 
 ### Hover, focus, and other states
 
-Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:duration-0` to only apply the `duration-0` utility on hover.
+Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:animation-duration-0` to only apply the `animation-duration-0` utility on hover.
 
 ```html
-<div class="animate-bounce duration-300 hover:duration-0">
+<div class="animate-bounce animation-duration-300 hover:animation-duration-0">
 	<!-- ... -->
 </div>
 ```
@@ -43,10 +41,10 @@ For a complete list of all available state modifiers, check out the [Hover, Focu
 
 ### Breakpoints and media queries
 
-You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:duration-0` to apply the `duration-0` utility at only medium screen sizes and above.
+You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:animation-duration-0` to apply the `animation-duration-0` utility at only medium screen sizes and above.
 
 ```html
-<div class="animate-bounce duration-150 md:duration-0">
+<div class="animate-bounce animation-duration-150 md:animation-duration-0">
 	<!-- ... -->
 </div>
 ```
@@ -79,7 +77,7 @@ Learn more about customizing the default theme in the [theme customization](http
 If you need to use a one-off `animation-duration` value that doesn’t make sense to include in your theme, use square brackets to generate a property on the fly using any arbitrary value.
 
 ```html
-<div class="duration-[2s]">
+<div class="animation-duration-[2s]">
 	<!-- ... -->
 </div>
 ```

diff --git a/docs/animation-fill-mode.md b/docs/animation-fill-mode.md
@@ -30,7 +30,7 @@ Tailwind lets you conditionally apply utility classes in different states using
 
 ```html
 <div
-	class="animate-bounce duration-300 fill-mode-backwards hover:fill-mode-forwards"
+	class="animate-bounce animation-duration-300 fill-mode-backwards hover:fill-mode-forwards"
 >
 	<!-- ... -->
 </div>
@@ -44,7 +44,7 @@ You can also use variant modifiers to target media queries like responsive break
 
 ```html
 <div
-	class="animate-bounce duration-300 fill-mode-backwards md:fill-mode-forwards"
+	class="animate-bounce animation-duration-300 fill-mode-backwards md:fill-mode-forwards"
 >
 	<!-- ... -->
 </div>

diff --git a/docs/zh/README.md b/docs/zh/README.md
@@ -10,7 +10,7 @@
 <div class="animate-out slide-out-to-top slide-out-to-left">...</div>
 
 <!-- 控制动画持续时间 -->
-<div class="... duration-300">...</div>
+<div class="... animation-duration-300">...</div>
 
 <!-- 控制动画延迟 -->
 <div class="... delay-150">. 。</div>
@@ -43,26 +43,29 @@ module.exports = {
 
 ## 文档
 
-- [基本用法](#basic-usage)
-  - [更改动画延迟](#changing-animation-delay)
-  - [更改动画方向](#changing-animation-direction)
-  - [更改动画持续时间](#changing-animation-duration)
-  - [更改动画填充模式](#changing-animation-fill-mode)
-  - [更改动画重复次数](#changing-animation-iteration-count)
-  - [更改动画播放状态](#changing-animation-play-state)
-  - [更改动画时序方式](#changing-animation-timing-function)
-  - [减少动效](#prefers-reduced-motion)
-- [进入以及推出动画](#enter-and-exit-animations)
-  - [添加进入动画](#adding-enter-animations)
-  - [添加退出动画](#adding-exit-animations)
-  - [更改进入动画时的不透明度](#changing-enter-animation-starting-opacity)
-  - [更改进入动画时的旋转](#changing-enter-animation-starting-rotation)
-  - [更改进入动画时的缩放](#changing-enter-animation-starting-scale)
-  - [更改进入动画时的变换](#changing-enter-animation-starting-translate)
-  - [更改退出动画时的不透明度](#changing-exit-animation-ending-opacity)
-  - [更改退出动画时的旋转](#changing-exit-animation-ending-rotation)
-  - [更改退出动画时的缩放](#changing-exit-animation-ending-scale)
-  - [更改退出动画时的变换](#changing-exit-animation-ending-translate)
+- [`tailwindcss-animate`](#tailwindcss-animate)
+  - [安装](#安装)
+  - [文档](#文档)
+    - [基本用法](#基本用法)
+      - [更改动画延迟](#更改动画延迟)
+      - [更改动画方向](#更改动画方向)
+      - [Changing animation duration](#changing-animation-duration)
+      - [Changing animation fill mode](#changing-animation-fill-mode)
+      - [Changing animation iteration count](#changing-animation-iteration-count)
+      - [Changing animation play state](#changing-animation-play-state)
+      - [Changing animation timing function](#changing-animation-timing-function)
+      - [Prefers-reduced-motion](#prefers-reduced-motion)
+    - [Enter \& Exit Animations](#enter--exit-animations)
+    - [Adding enter animations](#adding-enter-animations)
+    - [Adding exit animations](#adding-exit-animations)
+      - [Changing enter animation starting opacity](#changing-enter-animation-starting-opacity)
+      - [Changing enter animation starting rotation](#changing-enter-animation-starting-rotation)
+      - [Changing enter animation starting scale](#changing-enter-animation-starting-scale)
+      - [Changing enter animation starting translate](#changing-enter-animation-starting-translate)
+      - [Changing exit animation ending opacity](#changing-exit-animation-ending-opacity)
+      - [Changing exit animation ending rotation](#changing-exit-animation-ending-rotation)
+      - [Changing exit animation ending scale](#changing-exit-animation-ending-scale)
+      - [Changing exit animation ending translate](#changing-exit-animation-ending-translate)
 
 ### 基本用法
 
@@ -71,9 +74,9 @@ module.exports = {
 使用 `delay-{amount}` 标签控制元素的 `animation-delay`.
 
 ```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>
+<button class="animate-bounce delay-150 animation-duration-300 ...">Button A</button>
+<button class="animate-bounce delay-300 animation-duration-300 ...">Button B</button>
+<button class="animate-bounce delay-700 animation-duration-300 ...">Button C</button>
 ```
 
 查看更多与 [animation delay](/docs/animation-delay.md) 相关的文档
@@ -93,12 +96,12 @@ Learn more in the [animation direction](/docs/animation-direction.md) documentat
 
 #### Changing animation duration
 
-Use the `duration-{amount}` utilities to control an element’s `animation-duration`.
+Use the `animation-duration-{amount}` utilities to control an element’s `animation-duration`.
 
 ```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>
+<button class="animate-bounce animation-duration-150 ...">Button A</button>
+<button class="animate-bounce animation-duration-300 ...">Button B</button>
+<button class="animate-bounce animation-duration-700 ...">Button C</button>
 ```
 
 Learn more in the [animation duration](/docs/animation-duration.md) documentation.

diff --git a/docs/zh/docs/animation-delay.md b/docs/zh/docs/animation-delay.md
@@ -22,9 +22,9 @@
 Use the `delay-{amount}` utilities to control an element’s `animation-delay`.
 
 ```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>
+<button class="animate-bounce delay-150 animation-duration-300 ...">Button A</button>
+<button class="animate-bounce delay-300 animation-duration-300 ...">Button B</button>
+<button class="animate-bounce delay-700 animation-duration-300 ...">Button C</button>
 ```
 
 ## Applying Conditionally
@@ -34,7 +34,7 @@ Use the `delay-{amount}` utilities to control an element’s `animation-delay`.
 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:delay-0` to only apply the `delay-0` utility on hover.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 hover:delay-0">
+<div class="animate-bounce animation-duration-300 delay-150 hover:delay-0">
     <!-- ... -->
 </div>
 ```
@@ -46,7 +46,7 @@ For a complete list of all available state modifiers, check out the [Hover, Focu
 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:delay-0` to apply the `delay-0` utility at only medium screen sizes and above.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 md:delay-0">
+<div class="animate-bounce animation-duration-300 delay-150 md:delay-0">
     <!-- ... -->
 </div>
 ```

diff --git a/docs/zh/docs/animation-direction.md b/docs/zh/docs/animation-direction.md
@@ -29,7 +29,7 @@ Use the `direction-{keyword}` utilities to control an element’s `animation-del
 Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use `hover:direction-normal` to only apply the `direction-normal` utility on hover.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 hover:direction-normal">
+<div class="animate-bounce animation-duration-300 delay-150 hover:direction-normal">
     <!-- ... -->
 </div>
 ```
@@ -41,7 +41,7 @@ For a complete list of all available state modifiers, check out the [Hover, Focu
 You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use `md:direction-normal` to apply the `direction-normal` utility at only medium screen sizes and above.
 
 ```html
-<div class="animate-bounce duration-300 delay-150 md:direction-normal">
+<div class="animate-bounce animation-duration-300 delay-150 md:direction-normal">
     <!-- ... -->
 </div>
 ```