Tw Animate CSS

https://github.com/wombosvideo/tw-animate-css
Admin
A collection of Tailwind CSS v4.0 utilities for creating beautiful animations, including...
Tokens:18,283
Snippets:198
Trust Score:7.3
License:MIT
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install tw-animate-css via NPM

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

Install the package as a development dependency using the npm CLI.

```sh
npm install -D tw-animate-css
```

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

### JavaScript content height setting

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Example of setting the content height variable using JavaScript.

```js
document
  .getElementById("faq-accordion-1")
  .style.setProperty("--radix-collapsible-content-height", "1.75em");
```

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

### slide-out-to-start CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-exit-translate-x to -100% for left-to-right and 100% for right-to-left, sliding the element out to the start edge.

```css
&:dir(ltr) {
  --tw-exit-translate-x: -100%;
}
&:dir(rtl) {
  --tw-exit-translate-x: 100%;
}
```

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

### HTML content height setting

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Example of setting the content height variable directly on an HTML element.

```html
<div style="--radix-collapsible-content-height: 1.75em">...</div>
```

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

### slide-in-from-start class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to -100% for LTR and 100% for RTL using :dir() pseudo-classes.

```css
&:dir(ltr) {
  --tw-enter-translate-x: -100%;
}
&:dir(rtl) {
  --tw-enter-translate-x: 100%;
}
```

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

### slide-in-from-start-(<custom-property>) class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to calc(var(<custom-property>) * -1) for LTR and var(<custom-property>) for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: calc(var(<custom-property>) * -1);
}
&:dir(rtl) {
  --tw-enter-translate-x: var(<custom-property>);
}
```

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

### slide-in-from-start-[<value>] class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to calc(<value> * -1) for LTR and calc(<value>) for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: calc(<value> * -1);
}
&:dir(rtl) {
  --tw-enter-translate-x: calc(<value>);
}
```

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

### slide-in-from-start-<number> class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to calc(<number> * var(--spacing) * -1) for LTR and calc(<number> * var(--spacing)) for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: calc(<number> * var(--spacing) * -1);
}
&:dir(rtl) {
  --tw-enter-translate-x: calc(<number> * var(--spacing));
}
```

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

### Import Manual Downloaded CSS

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

If using a manual download, import the local tw-animate.css file in your stylesheet.

```css
@import "./tw-animate.css";
```

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

### ease-initial CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to initial.

```css
animation-timing-function: initial;
```

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

### running utility class

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-play-state.md

Sets the animation play state to running. Use the `running` utility class to apply this style.

```css
animation-play-state: running;
```

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

### play-state-* utility classes

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-play-state.md

The `play-state-*` utility classes allow setting the animation play state to initial, a custom property, or an arbitrary value. Use `play-state-initial`, `play-state-(<custom-property>)`, or `play-state-[<value>]` respectively.

```css
animation-play-state: initial;
```

```css
animation-play-state: var(<custom-property>);
```

```css
animation-play-state: <value>;
```

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

### Apply Animation Classes to HTML

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

Use utility classes to control entrance, exit, duration, and delay of animations on HTML elements.

```html
<!-- Add an animated fade and zoom entrance -->
<div class="animate-in fade-in zoom-in">...</div>

<!-- Add an animated slide to top-left exit -->
<div class="animate-out slide-out-to-top slide-out-to-left">...</div>

<!-- Control animation duration -->
<div class="... duration-300">...</div>

<!-- Control animation delay -->
<div class="... delay-150">...</div>

<!-- And so much more! -->
```

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

### Apply animation-fill-mode: initial

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to initial.

```css
animation-fill-mode: initial;
```

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

### Import tw-animate-css in CSS

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

Add the import statement to your main CSS file to include the animation styles.

```css
@import "tw-animate-css";
```

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

### slide-out-to-start-[<value>] CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses an arbitrary value to set the exit translate-x, with a negative value for ltr and positive for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: calc(<value> * -1);
}
&:dir(rtl) {
  --tw-exit-translate-x: calc(<value>);
}
```

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

### ease-in CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to var(--ease-in), which is cubic-bezier(0.4, 0, 1, 1).

```css
animation-timing-function: var(--ease-in); /* cubic-bezier(0.4, 0, 1, 1) */
```

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

### BitsUI Collapsible implementation

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Using the BitsUI headless collapsible component which automatically sets the required CSS variable.

```svelte
<script>
  import { Collapsible } from "bits-ui";
</script>

<Collapsible.Root>
	<Collapsible.Trigger />
	<Collapsible.Content />
</Collapsible.Root>
```

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

### slide-out-to-start-(<custom-property>) CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a custom property value to set the exit translate-x, with a negative value for ltr and positive for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: calc(var(<custom-property>) * -1);
}
&:dir(rtl) {
  --tw-exit-translate-x: var(<custom-property>);
}
```

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

### slide-out-to-start-<number> CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a numeric value multiplied by the spacing variable to set the exit translate-x, with a negative value for ltr and positive for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: calc(<number> * var(--spacing) * -1);
}
&:dir(rtl) {
  --tw-exit-translate-x: calc(<number> * var(--spacing));
}
```

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

### animate-caret-blink CSS implementation

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/caret-blink.md

The animation class uses a 1.25s ease-out infinite cycle to toggle opacity between 1 and 0, simulating a blinking cursor.

```css
animation: caret-blink 1.25s ease-out infinite;

@keyframes caret-blink {
  0%,
  70%,
  100% {
    opacity: 1;
  }
  20%,
  50% {
    opacity: 0;
  }
}
```

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

### ease-(<custom-property>) CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to var(<custom-property>).

```css
animation-timing-function: var(<custom-property>);
```

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

### slide-in-from-left-<number> style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Calculates the enter translate X based on a number multiplied by the spacing variable and negated.

```css
--tw-enter-translate-x: calc(<number> * var(--spacing) * -1);
```

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

### ease-[<value>] CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to the arbitrary value <value>.

```css
animation-timing-function: <value>;
```

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

### slide-in-from-left-[<value>] style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Calculates the enter translate X by negating an arbitrary value.

```css
--tw-enter-translate-x: calc(<value> * -1);
```

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

### slide-in-from-left-(<custom-property>) style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a custom property value for the enter translate X.

```css
--tw-enter-translate-x: var(<custom-property>);
```

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

### CSS for repeat-initial

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-iteration-count.md

Sets the animation-iteration-count to initial.

```css
animation-iteration-count: initial;
```

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

### slide-in-from-top default style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets the enter translate Y to -100% for the slide-in-from-top class.

```css
--tw-enter-translate-y: -100%;
```

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

### slide-in-from-bottom-[<value>] style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets the enter translate Y to an arbitrary value.

```css
--tw-enter-translate-y: <value>;
```

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

### slide-in-from-top-(<custom-property>) style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a custom property value for the enter translate Y.

```css
--tw-enter-translate-y: var(<custom-property>);
```

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

### ease-linear CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to linear.

```css
animation-timing-function: linear;
```

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

### slide-in-from-bottom-<number> style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Calculates the enter translate Y based on a number multiplied by the spacing variable.

```css
--tw-enter-translate-y: calc(<number> * var(--spacing));
```

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

### paused utility class

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-play-state.md

Sets the animation play state to paused. Use the `paused` utility class to apply this style.

```css
animation-play-state: paused;
```

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

### spin-in-(<custom-property>) CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-enter-rotate CSS variable using a custom property.

```css
--tw-enter-rotate: var(<custom-property>);
```

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

### slide-in-from-top-[<value>] style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Calculates the enter translate Y by negating an arbitrary value.

```css
--tw-enter-translate-y: calc(<value> * -1);
```

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

### spin-out-(<custom-property>) CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-exit-rotate CSS variable using a custom property.

```css
--tw-exit-rotate: var(<custom-property>);
```

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

### slide-in-from-end-(<custom-property>) class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-in-from-end-(<custom-property>) class. Sets --tw-enter-translate-x to the custom property value, negated for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: var(<custom-property>);
}
&:dir(rtl) {
  --tw-enter-translate-x: calc(var(<custom-property>) * -1);
}
```

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

### slide-out-to-top-[<value>] class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-out-to-top-[<value>] class. Uses calc(<value> * -1) for the exit translate.

```css
--tw-exit-translate-y: calc(<value> * -1);
```

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

### slide-in-from-top-<number> style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Calculates the enter translate Y based on a number multiplied by the spacing variable and negated.

```css
--tw-enter-translate-y: calc(<number> * var(--spacing) * -1);
```

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

### slide-in-from-left default style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets the enter translate X to -100% for the slide-in-from-left class.

```css
--tw-enter-translate-x: -100%;
```

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

### Apply animation-fill-mode: both

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to both.

```css
animation-fill-mode: both;
```

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

### slide-in-from-bottom default style

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets the enter translate Y to 100% for the slide-in-from-bottom class.

```css
--tw-enter-translate-y: 100%;
```

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

### ease-out CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to var(--ease-out), which is cubic-bezier(0, 0, 0.2, 1).

```css
animation-timing-function: var(--ease-out); /* cubic-bezier(0, 0, 0.2, 1) */
```

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

### ease-in-out CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-timing-function.md

Sets animation-timing-function to var(--ease-in-out), which is cubic-bezier(0.4, 0, 0.2, 1).

```css
animation-timing-function: var(--ease-in-out); /* cubic-bezier(0.4, 0, 0.2, 1) */
```

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

### slide-out-to-top-<number> class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-out-to-top-<number> class. Uses calc(<number> * var(--spacing) * -1) for the exit translate.

```css
--tw-exit-translate-y: calc(<number> * var(--spacing) * -1);
```

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

### blur-in-(<custom-property>) class sets --tw-enter-blur: var(<custom-property>)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-in-(<custom-property>) class sets the --tw-enter-blur custom property to the value of the specified custom property. Requires the animate-in class.

```css
--tw-enter-blur: var(<custom-property>);
```

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

### slide-in-from-end base class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-in-from-end class. Sets --tw-enter-translate-x to 100% for LTR and -100% for RTL direction.

```css
&:dir(ltr) {
  --tw-enter-translate-x: 100%;
}
&:dir(rtl) {
  --tw-enter-translate-x: -100%;
}
```

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

### spin-out-[<value>] CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-exit-rotate CSS variable using an arbitrary value.

```css
--tw-exit-rotate: <value>;
```

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

### slide-in-from-end-[<value>] class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-in-from-end-[<value>] class. Uses calc(<value>) for LTR and its negative for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: calc(<value>);
}
&:dir(rtl) {
  --tw-enter-translate-x: calc(<value> * -1);
}
```

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

### spin-in-[<value>] CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-enter-rotate CSS variable using an arbitrary value.

```css
--tw-enter-rotate: <value>;
```

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

### direction-* utility class CSS declarations

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-direction.md

CSS declarations for the direction-* utility classes: normal, reverse, alternate, alternate-reverse, initial, a custom property via var(), and an arbitrary value.

```css
animation-direction: normal;
```

```css
animation-direction: reverse;
```

```css
animation-direction: alternate;
```

```css
animation-direction: alternate-reverse;
```

```css
animation-direction: initial;
```

```css
animation-direction: var(<custom-property>);
```

```css
animation-direction: <value>;
```

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

### slide-in-from-right-[<value>] class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to <value> for the slide-in-from-right-[<value>] class.

```css
--tw-enter-translate-x: <value>;
```

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

### blur-in class sets --tw-enter-blur: 20px

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-in class sets the --tw-enter-blur custom property to 20px. Requires the animate-in class to take effect.

```css
--tw-enter-blur: 20px;
```

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

### blur-in-[<value>] class sets --tw-enter-blur: <value>

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-in-[<value>] class sets the --tw-enter-blur custom property to the arbitrary value. Requires the animate-in class.

```css
--tw-enter-blur: <value>;
```

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

### zoom-out-<number> class sets --tw-exit-scale to a percentage

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-out-<number> class sets the exit scale to a percentage value, e.g., zoom-out-50 would set --tw-exit-scale: 50%.

```css
--tw-exit-scale: <number>%;
```

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

### CSS for repeat-<number>

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-iteration-count.md

Sets the animation-iteration-count to a specific number.

```css
animation-iteration-count: <number>;
```

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

### HTML: Set --radix-accordion-content-height variable

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/accordion.md

Sets the accordion content height via the --radix-accordion-content-height CSS variable in an inline style. Use this until interpolate-size: allow-keywords has broader browser support.

```html
<div style="--radix-accordion-content-height: 1.75em">...</div>
```

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

### Radix Collapsible implementation

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Using the Radix UI collapsible primitive which automatically sets the required CSS variable.

```jsx
import { Collapsible } from "radix-ui";

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
);
```

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

### slide-in-from-right-<number> class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to calc(<number> * var(--spacing)) for the slide-in-from-right-<number> class.

```css
--tw-enter-translate-x: calc(<number> * var(--spacing));
```

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

### Apply animation-fill-mode with custom property

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property using a CSS custom property.

```css
animation-fill-mode: var(<custom-property>);
```

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

### zoom-in-<number> class sets --tw-enter-scale to a percentage

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-in-<number> class sets the enter scale to a percentage value, e.g., zoom-in-50 would set --tw-enter-scale: 50%.

```css
--tw-enter-scale: <number>%;
```

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

### slide-in-from-end-<number> class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-in-from-end-<number> class. Uses calc(<number> * var(--spacing)) for LTR and its negative for RTL.

```css
&:dir(ltr) {
  --tw-enter-translate-x: calc(<number> * var(--spacing));
}
&:dir(rtl) {
  --tw-enter-translate-x: calc(<number> * var(--spacing) * -1);
}
```

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

### blur-out-(<custom-property>) class sets --tw-exit-blur: var(<custom-property>)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-out-(<custom-property>) class sets the --tw-exit-blur custom property to the value of the specified custom property. Requires the animate-out class.

```css
--tw-exit-blur: var(<custom-property>);
```

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

### Kobalte Collapsible implementation

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Using the Kobalte headless collapsible component which automatically sets the required CSS variable.

```jsx
import { Collapsible } from "@kobalte/core/collapsible";

export default () => (
  <Collapsible.Root>
    <Collapsible.Trigger />
    <Collapsible.Content />
  </Collapsible.Root>
);
```

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

### zoom-in-[<value>] class sets --tw-enter-scale to an arbitrary value

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-in-[<value>] class sets the enter scale to an arbitrary value, e.g., zoom-in-[1.5] would set --tw-enter-scale: 1.5.

```css
--tw-enter-scale: <value>;
```

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

### slide-out-to-top-(<custom-property>) class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-out-to-top-(<custom-property>) class. Sets --tw-exit-translate-y to the custom property value.

```css
--tw-exit-translate-y: var(<custom-property>);
```

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

### blur-out-[<value>] class sets --tw-exit-blur: <value>

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-out-[<value>] class sets the --tw-exit-blur custom property to the arbitrary value. Requires the animate-out class.

```css
--tw-exit-blur: <value>;
```

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

### blur-in-<number> class sets --tw-enter-blur: calc(<number> * 1px)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-in-<number> class sets the --tw-enter-blur custom property to a calculated pixel value based on the number. Requires the animate-in class.

```css
--tw-enter-blur: calc(<number> * 1px);
```

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

### spin-out-<number> CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-exit-rotate CSS variable using a numeric value for rotation.

```css
--tw-exit-rotate: <number>deg;
```

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

### spin-out CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-exit-rotate CSS variable for the spin-out class.

```css
--tw-exit-rotate: 30deg;
```

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

### zoom-out-[<value>] class sets --tw-exit-scale to an arbitrary value

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-out-[<value>] class sets the exit scale to an arbitrary value, e.g., zoom-out-[1.5] would set --tw-exit-scale: 1.5.

```css
--tw-exit-scale: <value>;
```

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

### CSS for repeat-(<custom-property>)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-iteration-count.md

Sets the animation-iteration-count to a CSS custom property.

```css
animation-iteration-count: var(<custom-property>);
```

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

### Basic animation usage

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

Applies a fade-in and slide-in animation to a div element with a specified duration.

```html
<div class="animate-in fade-in slide-in-from-top-8 duration-500">
  Fade in from 0% opacity,<br />
  slide from top by 8 spacing units (2rem),<br />
  with a 500ms duration.
</div>
```

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

### slide-in-from-right class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-enter-translate-x to 100% for the slide-in-from-right class.

```css
--tw-enter-translate-x: 100%;
```

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

### slide-out-to-top base class CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS for the slide-out-to-top class. Sets --tw-exit-translate-y to -100%.

```css
--tw-exit-translate-y: -100%;
```

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

### JavaScript: Set --radix-accordion-content-height via style.setProperty

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/accordion.md

Sets the accordion content height variable programmatically on an element by ID. Use this when the height must be applied from script rather than inline markup.

```javascript
document
  .getElementById("faq-accordion-1")
  .style.setProperty("--radix-accordion-content-height", "1.75em");
```

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

### spin-in CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-enter-rotate CSS variable for the spin-in class.

```css
--tw-enter-rotate: 30deg;
```

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

### CSS for repeat-[<value>]

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-iteration-count.md

Sets the animation-iteration-count to an arbitrary value.

```css
animation-iteration-count: <value>;
```

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

### duration-initial CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Resets the --tw-duration variable to its initial value. Deprecated for setting animation-duration.

```css
--tw-duration: initial;
```

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

### blur-out-<number> class sets --tw-exit-blur: calc(<number> * 1px)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-out-<number> class sets the --tw-exit-blur custom property to a calculated pixel value based on the number. Requires the animate-out class.

```css
--tw-exit-blur: calc(<number> * 1px);
```

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

### slide-out-to-end CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Sets --tw-exit-translate-x to 100% for left-to-right and -100% for right-to-left, sliding the element out to the end edge.

```css
&:dir(ltr) {
  --tw-exit-translate-x: 100%;
}
&:dir(rtl) {
  --tw-exit-translate-x: -100%;
}
```

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

### Apply animation-fill-mode: none

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to none.

```css
animation-fill-mode: none;
```

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

### spin-in-<number> CSS variable configuration

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/rotate.md

Defines the --tw-enter-rotate CSS variable using a numeric value for rotation.

```css
--tw-enter-rotate: <number>deg;
```

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

### slide-out-to-end-[<value>] CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses an arbitrary value to set the exit translate-x, with a positive value for ltr and negative for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: calc(<value>);
}
&:dir(rtl) {
  --tw-exit-translate-x: calc(<value> * -1);
}
```

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

### CSS animation-delay declarations for delay-* classes

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-delay.md

These CSS declarations define the animation-delay property for the delay-* utility classes. The delay-<number> class sets a delay in milliseconds, delay-initial resets to the initial value, delay-(<custom-property>) uses a CSS variable, and delay-[<value>] accepts an arbitrary value.

```css
animation-delay: <number>ms;
```

```css
animation-delay: initial;
```

```css
animation-delay: var(<custom-property>);
```

```css
animation-delay: <value>;
```

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

### Advanced state-based animation

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

Uses data attributes to trigger different animations based on the element's state.

```html
<div
  class="data-[state=show]:animate-in data-[state=hide]:animate-out fade-in slide-in-from-top-8 fade-out slide-out-to-top-8 duration-500"
  data-state="show"
>
  <p>
    If the element has the <code>data-state="show"</code> attribute,<br />
    fade in from 0% opacity,<br />
    slide from top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
  <p>
    If the element has the <code>data-state="hide"</code> attribute,<br />
    fade out to 0% opacity,<br />
    slide to top by 8 spacing units (2rem),<br />
    with a 500ms duration.
  </p>
</div>
```

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

### CSS for repeat-infinite

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-iteration-count.md

Sets the animation-iteration-count to infinite.

```css
animation-iteration-count: infinite;
```

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

### CSS animate-collapsible-up

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Animation for closing a collapsible by sliding content up to a height of 0. Requires specifying the content height via CSS variables.

```css
animation: collapsible-up var(--tw-duration, 200ms) ease-out;

@keyframes collapsible-up {
  from {
    height: var(
      --radix-collapsible-content-height,
      var(
        --bits-collapsible-content-height,
        var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
      )
    );
  }
  to {
    height: 0;
  }
}
```

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

### blur-out class sets --tw-exit-blur: 20px

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/blur.md

The blur-out class sets the --tw-exit-blur custom property to 20px. Requires the animate-out class to take effect.

```css
--tw-exit-blur: 20px;
```

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

### animation-duration-initial CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Resets animation-duration to its initial value.

```css
animation-duration: initial;
```

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

### CSS animate-collapsible-down

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Animation for opening a collapsible by sliding content down to its full height. Requires specifying the content height via CSS variables.

```css
animation: collapsible-down var(--tw-duration, 200ms) ease-out;

@keyframes collapsible-down {
  from {
    height: 0;
  }
  to {
    height: var(
      --radix-collapsible-content-height,
      var(
        --bits-collapsible-content-height,
        var(--reka-collapsible-content-height, var(--kb-collapsible-content-height, auto))
      )
    );
  }
}
```

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

### Apply arbitrary animation-fill-mode value

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to an arbitrary value.

```css
animation-fill-mode: <value>;
```

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

### Reka Collapsible implementation

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/collapsible.md

Using the Reka UI headless collapsible component which automatically sets the required CSS variable.

```vue
<script setup>
import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from "reka-ui";
</script>

<template>
  <CollapsibleRoot>
    <CollapsibleTrigger />
    <CollapsibleContent />
  </CollapsibleRoot>
</template>
```

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

### Apply animation-fill-mode: forwards

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to forwards.

```css
animation-fill-mode: forwards;
```

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

### slide-out-to-end-(<custom-property>) CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a custom property value to set the exit translate-x, with a positive value for ltr and negative for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: var(<custom-property>);
}
&:dir(rtl) {
  --tw-exit-translate-x: calc(var(<custom-property>) * -1);
}
```

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

### zoom-in-(<custom-property>) class sets --tw-enter-scale to a CSS variable

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-in-(<custom-property>) class sets the enter scale to the value of a custom property, e.g., zoom-in-(--my-scale) would set --tw-enter-scale: var(--my-scale).

```css
--tw-enter-scale: var(<custom-property>);
```

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

### slide-out-to-end-<number> CSS styles

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

Uses a numeric value multiplied by the spacing variable to set the exit translate-x, with a positive value for ltr and negative for rtl.

```css
&:dir(ltr) {
  --tw-exit-translate-x: calc(<number> * var(--spacing));
}
&:dir(rtl) {
  --tw-exit-translate-x: calc(<number> * var(--spacing) * -1);
}
```

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

### slide-out-to-left CSS custom properties

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS custom property values for the slide-out-to-left utility class and its modifiers. The base class sets --tw-exit-translate-x to -100%. The <number> modifier uses calc(<number> * var(--spacing) * -1). The (<custom-property>) modifier uses var(<custom-property>). The [<value>] modifier uses calc(<value> * -1).

```css
--tw-exit-translate-x: -100%;
```

```css
--tw-exit-translate-x: calc(<number> * var(--spacing) * -1);
```

```css
--tw-exit-translate-x: var(<custom-property>);
```

```css
--tw-exit-translate-x: calc(<value> * -1);
```

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

### Apply animation-fill-mode: backwards

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-fill-mode.md

Sets the animation-fill-mode property to backwards.

```css
animation-fill-mode: backwards;
```

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

### Radix Accordion Primitive Usage (React)

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/accordion.md

Radix automatically sets the --radix-accordion-content-height variable, so no manual height configuration is needed. Use the accordion component primitive directly.

```jsx
import { Accordion } from "radix-ui";

export default () => (
  <Accordion.Root type="single" collapsible>
    <Accordion.Item value="item-1">
      <Accordion.Trigger>Is it accessible?</Accordion.Trigger>
      <Accordion.Content>Yes. It adheres to the WAI-ARIA design pattern.</Accordion.Content>
    </Accordion.Item>
  </Accordion.Root>
);
```

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

### animate-accordion-down CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/accordion.md

CSS animation for opening an accordion. Slides content down to full height. Requires specifying the content height (e.g., via --radix-accordion-content-height or similar).

```css
animation: accordion-down var(--tw-duration, 200ms) ease-out;

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(
      --radix-accordion-content-height,
      var(
        --bits-accordion-content-height,
        var(
          --reka-accordion-content-height,
          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
        )
      )
    );
  }
}
```

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

### animation-duration-(<custom-property>) CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets animation-duration using a custom property via var().

```css
animation-duration: var(<custom-property>);
```

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

### animation-duration-<number> CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets animation-duration to a number in milliseconds. The <number> placeholder is replaced with the actual value.

```css
animation-duration: <number>ms;
```

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

### zoom-out-(<custom-property>) class sets --tw-exit-scale to a CSS variable

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The zoom-out-(<custom-property>) class sets the exit scale to the value of a custom property, e.g., zoom-out-(--my-scale) would set --tw-exit-scale: var(--my-scale).

```css
--tw-exit-scale: var(<custom-property>);
```

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

### animation-duration-[<value>] CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets animation-duration to an arbitrary value.

```css
animation-duration: <value>;
```

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

### animate-accordion-up CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/accordion.md

CSS animation for closing an accordion. Slides content up to height 0. Requires specifying the content height (e.g., via --radix-accordion-content-height or similar).

```css
animation: accordion-up var(--tw-duration, 200ms) ease-out;

@keyframes accordion-up {
  from {
    height: var(
      --radix-accordion-content-height,
      var(
        --bits-accordion-content-height,
        var(
          --reka-accordion-content-height,
          var(--kb-accordion-content-height, var(--ngp-accordion-content-height, auto))
        )
      )
    );
  }
  to {
    height: 0;
  }
}
```

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

### animate-in CSS base class

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/in-out.md

The animate-in class is required to enable enter animations. It uses CSS variables for opacity, translation, scaling, and rotation.

```css
animation: enter var(--tw-duration, 150ms) var(--tw-ease, ease);

@keyframes enter {
  from {
    opacity: var(--tw-enter-opacity, 1);
    transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0)
      scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1))
      rotate(var(--tw-enter-rotate, 0));
  }
}
```

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

### slide-out-to-bottom CSS custom properties

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS custom property values for the slide-out-to-bottom utility class and its modifiers. The base class sets --tw-exit-translate-y to 100%. The <number> modifier uses calc(<number> * var(--spacing)). The (<custom-property>) modifier uses var(<custom-property>). The [<value>] modifier sets the value directly.

```css
--tw-exit-translate-y: 100%;
```

```css
--tw-exit-translate-y: calc(<number> * var(--spacing));
```

```css
--tw-exit-translate-y: var(<custom-property>);
```

```css
--tw-exit-translate-y: <value>;
```

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

### zoom-in class sets --tw-enter-scale: 0

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The default zoom-in class sets the enter scale to 0, which is used with the animate-in class.

```css
--tw-enter-scale: 0;
```

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

### duration-[<value>] CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets the --tw-duration variable to an arbitrary value. Deprecated for setting animation-duration.

```css
--tw-duration: <value>;
```

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

### zoom-out class sets --tw-exit-scale: 0

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/scale.md

The default zoom-out class sets the exit scale to 0, which is used with the animate-out class.

```css
--tw-exit-scale: 0;
```

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

### duration-(<custom-property>) CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets the --tw-duration variable using a custom property via var(). Deprecated for setting animation-duration.

```css
--tw-duration: var(<custom-property>);
```

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

### slide-out-to-right CSS custom properties

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/transforms/translate.md

CSS custom property values for the slide-out-to-right utility class and its modifiers. The base class sets --tw-exit-translate-x to 100%. The <number> modifier uses calc(<number> * var(--spacing)). The (<custom-property>) modifier uses var(<custom-property>). The [<value>] modifier sets the value directly.

```css
--tw-exit-translate-x: 100%;
```

```css
--tw-exit-translate-x: calc(<number> * var(--spacing));
```

```css
--tw-exit-translate-x: var(<custom-property>);
```

```css
--tw-exit-translate-x: <value>;
```

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

### duration-<number> CSS

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/parameters/animation-duration.md

Sets the --tw-duration variable to a number in milliseconds. Deprecated for setting animation-duration.

```css
--tw-duration: <number>ms;
```

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

### animate-out CSS base class

Source: https://github.com/wombosvideo/tw-animate-css/blob/main/docs/animations/in-out.md

The animate-out class is required to enable exit animations. It uses CSS variables to define the final state of the exit animation.

```css
animation: exit var(--tw-duration, 150ms) var(--tw-ease, ease);

@keyframes exit {
  to {
    opacity: var(--tw-exit-opacity, 1);
    transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0)
      scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1))
      rotate(var(--tw-exit-rotate, 0));
  }
}
```
Tokens:
Raw