Типовые элементы интерфейса — Анимации и переходы

.box {
  width: 120px;
  height: 120px;
  background-color: var(--color-primary);
  margin: 1rem;
  border-radius: 8px;
}

.animate-fade-in {
  animation: fadeIn 0.6s ease forwards;
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out forwards;
}

.animate-pulse {
  animation: pulse 2s infinite;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}