Responsive Design та анімації

Responsive Design — вода приймає форму будь-якої ємності

У попередніх уроках ми створювали розкладки з Flexbox та Grid. Але як зробити сайт зручним і на великому моніторі, і на маленькому смартфоні? Responsive Design — підхід, при якому сайт адаптується до будь-якого розміру екрану. А анімації додають йому живості.

Viewport meta tag

Щоб responsive працював на мобільних, в <head> обов'язково повинен бути:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Без цього тега мобільний браузер відобразить десктопну версію, зменшену до ширини екрану.

Media Queries

Media queries дозволяють застосовувати стилі залежно від розміру екрану:

/* Базові стилі — для всіх */
.container {
  padding: 1rem;
}

/* Стилі для екранів від 768px і ширше */
@media (min-width: 768px) {
  .container {
    padding: 2rem;
  }
}

/* Стилі для екранів від 1024px і ширше */
@media (min-width: 1024px) {
  .container {
    max-width: 1200px;
    margin: 0 auto;
  }
}

Типові breakpoints

Назва	Ширина	Пристрої
Mobile	до 767px	Смартфони
Tablet	768px – 1023px	Планшети
Desktop	1024px+	Ноутбуки, монітори

Mobile-first підхід

Є два підходи:

Desktop-first (старий):

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 768px) { .grid { grid-template-columns: 1fr; } }

Mobile-first (рекомендований):

.grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid { grid-template-columns: 1fr 1fr 1fr; } }

Порада

Завжди використовуй mobile-first (min-width). Простіше додавати складність на великих екранах, ніж прибирати на маленьких. Базові стилі — для мобільного, media queries — для розширення на планшет та десктоп.

Практика: responsive навігація

/* Mobile: вертикальне меню */
.nav-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Tablet+: горизонтальне меню */
@media (min-width: 768px) {
  .nav-links {
    flex-direction: row;
    gap: 2rem;
  }
}

Responsive без media queries

Завдяки Flexbox та Grid багато responsive можна робити без media queries:

/* Картки переносяться автоматично */
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px; /* мінімум 300px, потім росте */
}

/* Grid адаптивна сітка */
.gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
}

CSS Transitions — плавні переходи

transition робить зміну CSS-властивості плавною замість миттєвої:

.button {
  background-color: #3182ce;
  color: white;
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #2c5282; /* плавна зміна за 0.2 секунди */
}

Синтаксис

transition: property duration timing-function delay;

/* Приклади */
transition: all 0.3s ease;                   /* всі властивості */
transition: background-color 0.2s ease;       /* тільки фон */
transition: transform 0.3s ease, opacity 0.2s ease; /* кілька */

Параметр	Значення	Опис
property	`all`, `color`, `transform`...	Яка властивість анімується
duration	`0.2s`, `300ms`	Тривалість
timing-function	`ease`, `linear`, `ease-in-out`	Крива швидкості
delay	`0s`, `0.1s`	Затримка перед початком

Timing functions

linear:      ─────────── (рівномірно)
ease:        ──╱──────╲── (швидкий старт і кінець, повільна середина)
ease-in:     ────────╱── (повільний старт)
ease-out:    ──╲──────── (повільний кінець)
ease-in-out: ───╱────╲── (повільний старт і кінець)

CSS Transform — трансформації

transform змінює форму, розмір та позицію елемента без впливу на потік:

/* Масштаб */
.card:hover { transform: scale(1.05); }     /* збільшити на 5% */

/* Переміщення */
.element { transform: translateX(20px); }     /* вправо на 20px */
.element { transform: translateY(-10px); }    /* вгору на 10px */
.element { transform: translate(20px, -10px); }

/* Поворот */
.icon:hover { transform: rotate(180deg); }

/* Комбінування */
.card:hover { transform: translateY(-4px) scale(1.02); }

Функція	Що робить	Приклад
`scale()`	Масштабує	`scale(1.1)` — збільшити на 10%
`translateX/Y()`	Переміщує	`translateY(-8px)` — підняти
`rotate()`	Повертає	`rotate(45deg)` — на 45°
`skew()`	Нахиляє	`skewX(5deg)` — нахил

Hover-ефекти — найпопулярніші патерни

/* Підняття картки з тінню */
.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Зміна кольору кнопки */
.btn {
  transition: background-color 0.2s ease;
}
.btn:hover {
  background-color: #2c5282;
}

/* Підкреслення посилання знизу */
.link {
  position: relative;
}
.link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #3182ce;
  transition: width 0.3s ease;
}
.link:hover::after {
  width: 100%;
}

Keyframe Animations

Для складніших анімацій використовуй @keyframes:

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

.element {
  animation: fadeIn 0.5s ease forwards;
}

Синтаксис animation

animation: name duration timing-function delay iteration-count direction fill-mode;

/* Приклади */
animation: fadeIn 0.5s ease;                     /* одноразово */
animation: spin 1s linear infinite;              /* безкінечно */
animation: bounce 0.6s ease 0s 3;               /* 3 рази */
animation: slideIn 0.3s ease forwards;           /* залишити кінцевий стан */

Приклад: спіннер завантаження

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

.spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #3182ce;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

Підсумок

@media (min-width: ...) — mobile-first media queries
Breakpoints: 768px (tablet), 1024px (desktop)
transition — плавна зміна будь-якої CSS-властивості
transform — scale, translate, rotate без впливу на потік
@keyframes — складні анімації з кількома кроками
Без media queries: flex-wrap, auto-fit + minmax() часто достатньо

Що далі?

Блок CSS завершено! Далі ми переходимо до JavaScript — мови, яка робить сторінки інтерактивними.

Інфо

Інструменти:

Animista — генератор CSS-анімацій
Cubic Bezier — створення власних timing-functions
Responsive Design Checker — перевірка на різних екранах

Корисні посилання:

web.dev: Responsive Design — курс від Google
MDN: CSS Transitions — документація transitions
MDN: CSS Animations — документація animations