CSS Animation Keyframes Library

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes slide-up {
  from { transform: translateY(16px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}

@keyframes scale-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}

/* Utility classes */
.animate-fade-in   { animation: fade-in      0.3s ease both; }
.animate-slide-up  { animation: slide-up     0.4s ease both; }
.animate-scale-in  { animation: scale-in     0.25s ease both; }
.animate-spin      { animation: spin         1s linear infinite; }
.animate-pulse     { animation: pulse        1.5s ease infinite; }