Universal Animation Patterns
Apply Disney's 12 principles as baseline defaults for any animation.
Core Timing Scale
| Category |
Duration |
Use For |
| Instant |
100-150ms |
Hovers, toggles, micro-states |
| Fast |
150-250ms |
Feedback, small transitions |
| Standard |
250-400ms |
Modals, reveals, state changes |
| Slow |
400-600ms |
Page transitions, sequences |
| Deliberate |
600-1000ms |
Dramatic reveals, celebrations |
Universal Easing Library
:root {
/* Standard easings */
--ease-out: cubic-bezier(0, 0, 0.2, 1); /* Entrances */
--ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exits */
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* State changes */
/* Spring easings */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
--ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
}
The 12 Principles Quick Reference
- Squash & Stretch: Scale 0.95-1.05 range for organic feel
- Anticipation: 2-3px reverse movement or 50ms pause before action
- Staging: Animate toward user attention, clear visual hierarchy
- Straight Ahead vs Pose-to-Pose: Define keyframes, plan states
- Follow Through: Overshoot by 2-5%, settle back
- Slow In/Slow Out: Always ease, never linear (except spinners)
- Arcs: Combine X+Y movement, natural paths
- Secondary Action: Layer 2-3 properties max (opacity + transform + shadow)
- Timing: Match duration to distance/importance
- Exaggeration: Subtle for UI (under 10% deviation)
- Solid Drawing: Maintain visual consistency during motion
- Appeal: Motion should feel helpful, not performative
Base Animation Classes
/* Standard entrance */
.animate-in {
animation: fade-in 250ms var(--ease-out) forwards;
}
/* Standard exit */
.animate-out {
animation: fade-out 200ms var(--ease-in) forwards;
}
/* State transition */
.animate-state {
transition: all 200ms var(--ease-in-out);
}
@keyframes fade-in {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fade-out {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-10px); }
}
Universal Rules
- 100ms Response Time: User actions must trigger visible change within 100ms
- Under 400ms for UI: Functional animations shouldn't exceed 400ms
- Reduce Motion: Always provide
prefers-reduced-motion alternative
- GPU Properties: Use only
transform and opacity for smooth 60fps
- Exit < Enter: Exits 20-30% faster than entrances
Accessibility Default
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
Decision Tree
- Is element entering? → Use ease-out, 200-300ms
- Is element exiting? → Use ease-in, 150-250ms
- Is element changing state? → Use ease-in-out, 150-250ms
- Is it continuous? → Use linear (rotation) or ease-in-out (pulse)
- Is it responding to gesture? → Use ease-out with overshoot, under 200ms
When uncertain, start with: 250ms cubic-bezier(0.4, 0, 0.2, 1)
1---2name: universal-patterns3description: Use when creating any animation type - provides foundational timing, easing, and principle application that applies to all motion in interfaces.4---5
6# Universal Animation Patterns
7
8Apply Disney's 12 principles as baseline defaults for any animation.
9
10## Core Timing Scale
11
12| Category | Duration | Use For |
13|----------|----------|---------|
14| Instant | 100-150ms | Hovers, toggles, micro-states |
15| Fast | 150-250ms | Feedback, small transitions |
16| Standard | 250-400ms | Modals, reveals, state changes |
17| Slow | 400-600ms | Page transitions, sequences |
18| Deliberate | 600-1000ms | Dramatic reveals, celebrations |
19
20## Universal Easing Library
21
22```css
23:root {
24 /* Standard easings */
25 --ease-out: cubic-bezier(0, 0, 0.2, 1); /* Entrances */
26 --ease-in: cubic-bezier(0.4, 0, 1, 1); /* Exits */
27 --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* State changes */
28
29 /* Spring easings */
30 --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /* Overshoot */
31 --ease-bounce: cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Playful */
32}
33```
34
35## The 12 Principles Quick Reference
36
371. **Squash & Stretch**: Scale 0.95-1.05 range for organic feel
382. **Anticipation**: 2-3px reverse movement or 50ms pause before action
393. **Staging**: Animate toward user attention, clear visual hierarchy
404. **Straight Ahead vs Pose-to-Pose**: Define keyframes, plan states
415. **Follow Through**: Overshoot by 2-5%, settle back
426. **Slow In/Slow Out**: Always ease, never linear (except spinners)
437. **Arcs**: Combine X+Y movement, natural paths
448. **Secondary Action**: Layer 2-3 properties max (opacity + transform + shadow)
459. **Timing**: Match duration to distance/importance
4610. **Exaggeration**: Subtle for UI (under 10% deviation)
4711. **Solid Drawing**: Maintain visual consistency during motion
4812. **Appeal**: Motion should feel helpful, not performative
49
50## Base Animation Classes
51
52```css
53/* Standard entrance */
54.animate-in {
55 animation: fade-in 250ms var(--ease-out) forwards;
56}
57
58/* Standard exit */
59.animate-out {
60 animation: fade-out 200ms var(--ease-in) forwards;
61}
62
63/* State transition */
64.animate-state {
65 transition: all 200ms var(--ease-in-out);
66}
67
68@keyframes fade-in {
69 from { opacity: 0; transform: translateY(10px); }
70 to { opacity: 1; transform: translateY(0); }
71}
72
73@keyframes fade-out {
74 from { opacity: 1; transform: translateY(0); }
75 to { opacity: 0; transform: translateY(-10px); }
76}
77```
78
79## Universal Rules
80
811. **100ms Response Time**: User actions must trigger visible change within 100ms
822. **Under 400ms for UI**: Functional animations shouldn't exceed 400ms
833. **Reduce Motion**: Always provide `prefers-reduced-motion` alternative
844. **GPU Properties**: Use only `transform` and `opacity` for smooth 60fps
855. **Exit < Enter**: Exits 20-30% faster than entrances
86
87## Accessibility Default
88
89```css
90@media (prefers-reduced-motion: reduce) {
91 *, *::before, *::after {
92 animation-duration: 0.01ms !important;
93 animation-iteration-count: 1 !important;
94 transition-duration: 0.01ms !important;
95 }
96}
97```
98
99## Decision Tree
100
1011. Is element entering? → Use ease-out, 200-300ms
1022. Is element exiting? → Use ease-in, 150-250ms
1033. Is element changing state? → Use ease-in-out, 150-250ms
1044. Is it continuous? → Use linear (rotation) or ease-in-out (pulse)
1055. Is it responding to gesture? → Use ease-out with overshoot, under 200ms
106
107When uncertain, start with: `250ms cubic-bezier(0.4, 0, 0.2, 1)`
majiayu000