CSS-анимации — готовые эффекты — Набор переиспользуемых классов

/* --- Появление --- */
.animate-fade-in   { animation: fadeIn 0.6s ease forwards; }
.animate-slide-up  { animation: slideUp 0.5s ease-out forwards; }
.animate-pulse     { animation: pulse 2s ease-in-out 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); }
}

/* --- Hover-кнопка --- */
.btn-motion {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-motion:hover {
  transform: translateY(-2px);
}