Анимации и SASS

Плавные переходы делают интерфейс «живым», а SASS избавляет стили от миллионов повторных строк. Два инструмента, которые мгновенно поднимают качество вёрстки.

Transition: плавное изменение

transition описывает, как свойство меняется между состояниями. Ховер резко меняет цвет — добавьте transition, и изменится плавно.

.btn {
  background: #38bdf8;
  transition: background 0.25s ease,
              transform 0.25s ease;
}
.btn:hover {
  background: #818cf8;
  transform: translateY(-2px);
}

@keyframes: настоящая анимация

Если transition — это «А → Б», то анимация — целый сценарий с промежуточными кадрами.

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

.hero h1 {
  animation: fadeUp 0.6s ease both;
}

/* «both» — начнём из from до старта и останемся в to после */
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

Уважение к пользователю

Кому-то анимации мешают при вестибулярных расстройствах. Пара строк — и сайт отключит «большие» анимации для тех, кто просит:

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important; }
}

SASS: стили без повторов

SASS — это «CSS с привилегиями»: переменные, вложенность и миксины. Браузер его не понимает, поэтому сначала компилируем в обычный CSS.

$accent: #38bdf8;
$radius: 12px;

.card {
  padding: 20px;
  border-radius: $radius;
  border: 1px solid lighten(#0b1220, 20%);

  h3 { margin: 0 0 8px; }        /* вложенность вместо .card h3 */
  &:hover { border-color: $accent; }  /* & — “сам элемент” */
}

@mixin center {                    /* миксин — переиспользуемый блок */
  display: flex;
  align-items: center;
  justify-content: center;
}
.badge { @include center; }

# установка и сборка
npm install -g sass
sass src/styles.scss dist/styles.css
# или однократно без установки:
npx sass scss/main.scss css/main.css