animate

animate

Sets animation via --animate. E.g. spin 1s linear infinite.

CSS Rules

.animate {
  animation: var(--animate);
}

Usage

<element class="animate" style="--animate: /* value */;" />

Responsive

Prefix .animate utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate" style="--md-animate: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate:hover" style="--animate-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate::before" style="--animate-before: /* value */;" />

<element class="content-after animate::after" style="--animate-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="animate=value" />

<!-- Output -->
<element class="animate" style="--animate: value;" />

animate-spin

Applies an infinite rotation animation. Useful for loading spinners.

CSS Rules

.animate-spin {
  animation: var(--animate-spin);
}

Usage

<element class="animate-spin" />

Responsive

Prefix .animate-spin utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate-spin" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate-spin:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate-spin:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate-spin::before" />

<element class="content-after animate-spin::after" />

animate-ping

Applies a radar-like ping animation. Good for notification badges.

CSS Rules

.animate-ping {
  animation: var(--animate-ping);
}

Usage

<element class="animate-ping" />

Responsive

Prefix .animate-ping utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate-ping" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate-ping:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate-ping:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate-ping::before" />

<element class="content-after animate-ping::after" />

animate-pulse

Applies a gentle fade in/out pulse. Good for skeleton loading states.

CSS Rules

.animate-pulse {
  animation: var(--animate-pulse);
}

Usage

<element class="animate-pulse" />

Responsive

Prefix .animate-pulse utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate-pulse" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate-pulse:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate-pulse:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate-pulse::before" />

<element class="content-after animate-pulse::after" />

animate-bounce

Applies a bounce animation.

CSS Rules

.animate-bounce {
  animation: var(--animate-bounce);
}

Usage

<element class="animate-bounce" />

Responsive

Prefix .animate-bounce utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate-bounce" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate-bounce:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate-bounce:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate-bounce::before" />

<element class="content-after animate-bounce::after" />

animate-none

Removes animation.

CSS Rules

.animate-none {
  animation: none;
}

Usage

<element class="animate-none" />

Responsive

Prefix .animate-none utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:animate-none" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="animate-none:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="animate-none:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before animate-none::before" />

<element class="content-after animate-none::after" />