# Micro Animation Library

> A reference library of common micro-animations with CSS/JS implementations.

- Skill: `dragoon0x/micro-animation-library` (Agent Skill)
- Install (CLI): `npx skillmds@latest add dragoon0x/micro-animation-library`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dragoon0x/micro-animation-library/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: dragoon0x (https://skillmd.com/u/dragoon0x)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/dragoon0x/micro-animation-library

---


# Micro-Animation Library

## Entry Animations
```css
@keyframes fadeIn {
  from { opacity: 0; } to { opacity: 1; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes slideInRight {
  from { opacity: 0; transform: translateX(16px); }
  to { opacity: 1; transform: translateX(0); }
}
```

## Interaction Feedback
```css
.button:active { transform: scale(0.97); }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.toggle-on { background: var(--color-accent); }
.checkbox-check { stroke-dasharray: 16; animation: drawCheck 200ms ease forwards; }
```

## State Transitions
```css
.expandable { transition: height 250ms ease, opacity 200ms ease; }
.skeleton { animation: shimmer 1.5s ease-in-out infinite; }
.toast-enter { animation: slideInRight 200ms ease-out; }
.toast-exit { animation: fadeOut 150ms ease-in; }
```

## Usage Rules
- All durations from the timing scale (100, 150, 200, 250, 300, 400, 500ms)
- All easings from the easing tokens
- `prefers-reduced-motion: reduce` disables all
- GPU-accelerated properties only (transform, opacity)