# Transitions and animation

- [Animation](#animation)
- [Transition Delay](#transition-delay)
- [Transition Duration](#transition-duration)
- [Transition Property](#transition-property)
- [Transition Timing Function](#transition-timing-function)

-----


## Animation

Utilities for animating elements with CSS animations.

### Group

| TailwindJS token |
| ----- |
| `animation_utilities` |


### Utilities

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `animate_bounce` | [animate-bounce](#animation) |
| `animate_none` | [animate-none](#animation) |
| `animate_ping` | [animate-ping](#animation) |
| `animate_pulse` | [animate-pulse](#animation) |
| `animate_spin` | [animate-spin](#animation) |



### Arbitraries

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `animate_arbitrary`, `animate_arb` | [animate-[…]](#https://tailwindcss.com/docs/animation#arbitrary-values) |



## Transition Delay

Utilities for controlling the delay of CSS transitions.

### Group

| TailwindJS token |
| ----- |
| `transition_delay_utilities` |


### Utilities

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `delay_0` | [delay-0](#transition_delay) |
| `delay_100` | [delay-100](#transition_delay) |
| `delay_1000` | [delay-1000](#transition_delay) |
| `delay_150` | [delay-150](#transition_delay) |
| `delay_200` | [delay-200](#transition_delay) |
| `delay_300` | [delay-300](#transition_delay) |
| `delay_500` | [delay-500](#transition_delay) |
| `delay_700` | [delay-700](#transition_delay) |
| `delay_75` | [delay-75](#transition_delay) |



### Arbitraries

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `delay_arbitrary`, `delay_arb` | [delay-[…]](#https://tailwindcss.com/docs/transition-delay#arbitrary-values) |



## Transition Duration

Utilities for controlling the duration of CSS transitions.

### Group

| TailwindJS token |
| ----- |
| `transition_duration_utilities` |


### Utilities

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `duration_0` | [duration-0](#transition_duration) |
| `duration_100` | [duration-100](#transition_duration) |
| `duration_1000` | [duration-1000](#transition_duration) |
| `duration_150` | [duration-150](#transition_duration) |
| `duration_200` | [duration-200](#transition_duration) |
| `duration_300` | [duration-300](#transition_duration) |
| `duration_500` | [duration-500](#transition_duration) |
| `duration_700` | [duration-700](#transition_duration) |
| `duration_75` | [duration-75](#transition_duration) |



### Arbitraries

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `duration_arbitrary`, `duration_arb` | [duration-[…]](#https://tailwindcss.com/docs/transition-duration#arbitrary-values) |



## Transition Property

Utilities for controlling which CSS properties transition.

### Group

| TailwindJS token |
| ----- |
| `transition_property_utilities` |


### Utilities

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `transition` | [transition](#transition_property) |
| `transition_all` | [transition-all](#transition_property) |
| `transition_colors` | [transition-colors](#transition_property) |
| `transition_none` | [transition-none](#transition_property) |
| `transition_opacity` | [transition-opacity](#transition_property) |
| `transition_shadow` | [transition-shadow](#transition_property) |
| `transition_transform` | [transition-transform](#transition_property) |



### Arbitraries

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `transition_arbitrary`, `transition_arb` | [transition-[…]](#https://tailwindcss.com/docs/transition-property#arbitrary-values) |



## Transition Timing Function

Utilities for controlling the easing of CSS transitions.

### Group

| TailwindJS token |
| ----- |
| `transition_timing_function_utilities` |


### Utilities

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `ease_in` | [ease-in](#transition_timing_function) |
| `ease_in_out` | [ease-in-out](#transition_timing_function) |
| `ease_linear` | [ease-linear](#transition_timing_function) |
| `ease_out` | [ease-out](#transition_timing_function) |



### Arbitraries

| TailwindJS token | TailwindCSS token |
| ----- | ----- |
| `ease_arbitrary`, `ease_arb` | [ease-[…]](#https://tailwindcss.com/docs/transition-timing-function#arbitrary-values) |
| `ease_in_arbitrary`, `ease_in_arb` | [ease-in-[…]](#https://tailwindcss.com/docs/transition-timing-function#arbitrary-values) |