Micro Animation Library

Micro-Animation Library

Entry Animations

@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

.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

.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)