# Animations

A curated set of canned micro-animations for common UI interactions, including entry and attention effects.

Skeleton provides a set of canned CSS animations, exposed as Tailwind `animate-*` utilities. Apply them with a single class — no custom keyframes required.

```astro
---
const commonClasses = 'size-20 rounded-xl text-xs font-medium grid place-items-center';
---

<p class="text-sm mb-2 opacity-75">Entry animations</p>
<div class="grid grid-cols-3 gap-4">
	<div class={`${commonClasses} animate-pop-in`}>pop-in</div>
	<div class={`${commonClasses} animate-fade-in`}>fade-in</div>
	<div class={`${commonClasses} animate-zoom-in`}>zoom-in</div>
	<div class={`${commonClasses} animate-slide-in-up`}>slide-up</div>
	<div class={`${commonClasses} animate-slide-in-down`}>slide-down</div>
	<div class={`${commonClasses} animate-slide-in-left`}>slide-left</div>
	<div class={`${commonClasses} animate-slide-in-right`}>slide-right</div>
</div>

<p class="text-sm mt-6 opacity-75">Attention animations</p>
<div class="grid grid-cols-3 gap-4">
	<div class={`${commonClasses} animate-shake`}>shake</div>
	<div class={`${commonClasses} animate-wiggle`}>wiggle</div>
	<div class={`${commonClasses} animate-pulse-soft`}>pulse-soft</div>
</div>

```

## Entry Animations

Animate an element into view. Use these to reveal content when it mounts, or pair with a conditional render for list transitions.

\| Class                    | Description                                |
\| ------------------------ | ------------------------------------------ |
\| `animate-pop-in`         | Scales up from 80% with a subtle overshoot |
\| `animate-fade-in`        | Fades in from fully transparent            |
\| `animate-zoom-in`        | Scales up from 80% while fading in         |
\| `animate-slide-in-up`    | Slides up 12px while fading in             |
\| `animate-slide-in-down`  | Slides down 12px while fading in           |
\| `animate-slide-in-left`  | Slides left 12px while fading in           |
\| `animate-slide-in-right` | Slides right 12px while fading in          |

## Attention Animations

Draw attention to an element, or signal interaction feedback such as a validation error.

\| Class                | Description                                |
\| -------------------- | ------------------------------------------ |
\| `animate-shake`      | Shakes horizontally. Great for form errors |
\| `animate-wiggle`     | Gently rotates back and forth, looping     |
\| `animate-pulse-soft` | Softly fades opacity in and out, looping   |

## Usage

Entry animations use a `both` fill mode, so elements start at their initial keyframe state (hidden) before animating. Attention animations that loop run indefinitely.

```html
<div class="animate-pop-in">
	<!-- content -->
</div>
```

Entry animations run once on mount. To replay them, re-mount the element or re-trigger the animation:

```html
<div class="animate-shake motion-reduce:animate-none">
	<!-- content -->
</div>
```

Use the `motion-reduce` variant to disable animations for users who prefer reduced motion.

## Customizing

Canned animations are defined as theme variables, so you can override the duration, easing, or iteration count per project, or use them as a base for your own keyframes.

```css
@theme {
	--animate-pop-in: skeleton-pop-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
```