CSS Animation

@keyframes slide-in {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

.card {
  animation-name: slide-in;
  animation-duration: 0.5s;
}

.spinner {
  animation: spin 1s linear infinite;
  /* name, duration, timing-function, iteration-count */
}

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

@keyframes pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.badge {
  animation: pulse 2s ease-in-out infinite;
}