Transitions і Simple Animations

З поверненням.

У попередньому уроці ти вивчив backgrounds, borders і shadows.

Твої cards стали більш polished.

Твої buttons почали виглядати поважно.

CSS нарешті зачесав волосся.

Тепер ми додаємо рух.

Не chaos.

Не обертання всього підряд, як website, який зробила надто щаслива білка.

Smooth movement.

Сьогодні ми вивчимо transitions і simple animations.

Transitions допомагають CSS changes відбуватися плавно.

Animations дозволяють elements рухатися автоматично.

Якщо використовувати їх добре, website відчувається alive.

Якщо погано — users починають думати, чи page не потребує медичної допомоги.

Що Ти Вивчиш

У цьому уроці ти дізнаєшся:

що таке CSS transitions;
як використовувати transition;
як анімувати hover effects;
як використовувати transform;
як використовувати scale;
як використовувати translateY;
як створювати smooth buttons і cards;
що таке @keyframes;
як створювати simple CSS animations;
як уникати annoying motion.

Що Таке Transition?

Transition робить CSS change поступовим.

Без transition:

.button:hover {
  background-color: #2563eb;
}

Color змінюється миттєво.

З transition:

.button {
  transition: background-color 0.2s ease;
}

.button:hover {
  background-color: #2563eb;
}

Тепер color змінюється плавно.

Browser каже:

“Спокійно. Я не стрибатиму. Я плавно перейду.”

Оце правильний дух CSS.

Створи Проєкт

Створи папку для цього уроку:

mkdir css-lesson9
cd css-lesson9
touch index.html
touch style.css

Ти маєш отримати:

css-lesson9/
  index.html
  style.css

Відкрий папку у своєму editor.

Ми побудуємо маленьку interactive landing page з:

navbar;
hero section;
animated button;
cards з hover effects;
однією simple keyframe animation.

Нічого занадто божевільного.

Це не circus.

Це website з manners.

Напиши HTML

Відкрий index.html і додай це:

<!DOCTYPE html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Transitions і Simple Animations</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="hero">
    <nav class="navbar">
      <h1 class="logo">MotionCSS</h1>

      <div class="nav-links">
        <a href="#">Головна</a>
        <a href="#">Уроки</a>
        <a href="#">Проєкти</a>
        <a href="#">Контакт</a>
      </div>
    </nav>

    <section class="hero-content">
      <p class="eyebrow">CSS Motion</p>
      <h2>Зроби Свій Interface Плавним</h2>
      <p>
        Transitions і animations допомагають website відчуватися більш responsive, polished і alive.
      </p>
      <a href="#" class="button">Почати Рух</a>
    </section>
  </header>

  <main class="page">
    <section class="intro-card">
      <h2>Рух Має Допомагати</h2>
      <p>
        Хороший motion веде attention. Поганий motion відволікає users і робить page нервовою.
      </p>
    </section>

    <section class="cards">
      <article class="card">
        <div class="icon">↗</div>
        <h2>Transitions</h2>
        <p>Роблять style changes плавними, коли users hover, focus або interact.</p>
      </article>

      <article class="card featured">
        <div class="icon">★</div>
        <h2>Transforms</h2>
        <p>Рухають, масштабують, обертають і змінюють elements без руйнування layout.</p>
      </article>

      <article class="card">
        <div class="icon">∞</div>
        <h2>Animations</h2>
        <p>Створюють повторюваний або автоматичний рух за допомогою keyframes.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Створено під час вивчення CSS transitions і simple animations.</p>
  </footer>
</body>
</html>

Це дає нам:

hero;
navigation;
button;
intro card;
три cards;
icons;
footer.

Тепер ми можемо змусити interface рухатися.

Обережно.

Як ninja.

Не як пральна машина з цеглою всередині.

Почни з Базового CSS

Відкрий style.css і додай:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Це дає нам clean foundation.

Тепер додай styles для hero і navigation:

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Page тепер має dark hero і clean navbar.

Добре.

Руху ще немає.

Website стоїть спокійно і поводиться ввічливо.

Скоро навчимо його рухатися.

Стилізуй Hero Content

Додай це:

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

Тепер hero виглядає як real section.

Large heading.

Readable paragraph.

Small label.

Дуже professional.

Майже підозріло calm.

Стилізуй Button

Додай це:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Button виглядає нормально.

Але ще не реагує.

Просто сидить там.

Як дверний дзвінок, який не дзвонить.

Виправимо це.

Додай Transition

Додай це до .button:

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Тепер додай hover:

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

Тепер коли ти наводиш mouse, button плавно рухається вгору.

Важливо:

Transition ставиться у normal state.

Не тільки на hover.

Правильно:

.button {
  transition: transform 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
}

Якщо поставити transition тільки на hover, effect може виглядати дивно, коли mouse залишає element.

CSS чутливий.

Як скрипка.

Але з semicolons.

Property transition

Property transition може включати:

property duration timing-function delay

Приклад:

transition: background-color 0.3s ease;

Це означає:

property: background-color;
duration: 0.3s;
timing: ease.

Можна робити transition для кількох properties:

transition: transform 0.2s ease, box-shadow 0.2s ease;

Можна також transition everything:

transition: all 0.2s ease;

Але обережно з all.

Воно може animate речі, яких ти не очікував.

CSS любить unexpected things.

Іноді занадто сильно.

Transform

Property transform змінює те, як element показується visually.

Він може move, scale, rotate або skew element.

Приклади:

transform: translateY(-4px);
transform: scale(1.05);
transform: rotate(3deg);

Transforms корисні, бо зазвичай не ламають rest of layout.

Element рухається visually.

А document flow залишається stable.

Це добре.

Element, який рухається, не має змушувати всю page панікувати.

Стилізуй Page і Cards

Додай це:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

Тепер стилізуй кожну card:

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

Card тепер має transition.

Але hover ще треба додати.

Card Hover Effect

Додай:

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

Тепер card м’яко піднімається при hover.

Це common pattern.

Він каже user:

“Цей element interactive.”

Але не роби lift занадто великим.

Погано:

transform: translateY(-40px);

Так card виглядає, ніби намагається втекти з meeting.

Small movement better.

Icon Animation

Стилізуй icon:

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

Тепер зроби, щоб icon рухалася, коли card має hover:

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

Це означає:

Коли card має hover, зміни icon всередині неї.

Це useful.

Вся card реагує.

Icon теж реагує.

Interface відчувається connected.

Ніби CSS нарешті зрозумів teamwork.

Featured Card

Додай:

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

Тепер middle card виділяється.

Page має hierarchy.

Users можуть бачити, що важливе.

Good design guides attention.

Bad design throws glitter and hopes for the best.

Що Таке Keyframes?

Transitions відбуваються, коли property змінюється.

Animations можуть працювати автоматично.

Для animations ми використовуємо @keyframes.

Приклад:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

Це описує animation з назвою float.

На початку element нормальний.

Посередині він рухається вгору.

Наприкінці повертається.

Тепер можемо застосувати це.

Додай Simple Animation

Додай це:

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

Тепер застосуй це до button:

.button {
  animation: float 3s ease-in-out infinite;
}

Це змушує button gently float forever.

Але будь обережний.

Infinite animation може стати annoying.

Використовуй її тільки тоді, коли вона subtle.

Якщо button стрибає forever, ніби випив сім espresso, users тобі не подякують.

Краще Використання Animation

Замість того щоб animate main button forever, можна animate тільки small decorative element.

Наприклад, додай floating effect до featured icon:

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

Це більш subtle.

Page відчувається alive.

Але не desperate.

Good motion feels calm.

Bad motion feels like the website is trying to get your attention during a fire alarm.

Footer

Додай:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Simple footer.

Animation не потрібна.

Не все має рухатися.

Серйозно.

Не animate footer тільки тому, що можеш.

CSS power must be controlled.

Повний CSS

Твій style.css має виглядати так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.hero {
  background: linear-gradient(135deg, #111827, #312e81);
  color: white;
}

.navbar {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero-content {
  max-width: 800px;
  margin: 0 auto;
  padding: 80px 24px 96px;
  text-align: center;
}

.eyebrow {
  margin: 0 0 16px;
  color: #c4b5fd;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

.hero-content h2 {
  margin: 0 0 20px;
  font-size: 56px;
  line-height: 1.1;
}

.hero-content p {
  color: #ddd6fe;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: white;
  color: #312e81;
  padding: 14px 22px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.button:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.25);
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.intro-card {
  background-color: white;
  padding: 32px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  margin-bottom: 24px;
}

.intro-card h2 {
  margin-top: 0;
}

.intro-card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.card {
  background-color: white;
  padding: 28px;
  border: 2px solid #e5e7eb;
  border-radius: 24px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.12);
  border-color: #7c3aed;
}

.card h2 {
  margin-top: 16px;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.7;
}

.icon {
  width: 48px;
  height: 48px;
  border-radius: 16px;
  background-color: #ede9fe;
  color: #6d28d9;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  transition: transform 0.2s ease;
}

.card:hover .icon {
  transform: scale(1.1) rotate(3deg);
}

.featured {
  border-color: #7c3aed;
  background-color: #f5f3ff;
}

@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }

  100% {
    transform: translateY(0);
  }
}

.featured .icon {
  animation: float 3s ease-in-out infinite;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

@media (max-width: 800px) {
  .hero-content h2 {
    font-size: 42px;
  }

  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 560px) {
  .navbar {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-links {
    flex-direction: column;
    gap: 12px;
  }

  .hero-content {
    padding: 56px 20px 72px;
    text-align: left;
  }

  .hero-content h2 {
    font-size: 34px;
  }

  .hero-content p {
    font-size: 18px;
  }

  .cards {
    grid-template-columns: 1fr;
  }

  .intro-card,
  .card {
    padding: 24px;
  }
}

Збережи.

Онови.

Наведи mouse на button.

Наведи mouse на cards.

Подивись, як featured icon gently float.

Твоя page тепер має motion.

Не занадто багато.

Рівно стільки, щоб відчуватися alive.

Як professional website після однієї кави.

Не після семи.

Типові Помилки

Animate Everything

Погана ідея:

* {
  transition: all 1s ease;
}

Це може створити strange effects everywhere.

Inputs.

Layout changes.

Hidden surprises.

CSS chaos у гарній куртці.

Будь specific.

Краще:

.card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

Занадто Багато Руху

Погано:

.card:hover {
  transform: rotate(20deg) scale(1.3);
}

Якщо ти не будуєш clown portfolio, це probably too much.

Small movement usually feels better.

.card:hover {
  transform: translateY(-4px);
}

Infinite Animations Everywhere

Infinite animations можуть distract.

Використовуй їх carefully.

Good places:

small icons;
subtle background elements;
loading indicators.

Bad places:

paragraphs;
entire sections;
every card;
footer;
твоя душа.

Accessibility Note

Деякі users prefer reduced motion.

CSS підтримує це через:

@media (prefers-reduced-motion: reduce) {
  * {
    animation: none;
    transition: none;
  }
}

Це поважає users, яким може бути uncomfortable від motion.

Не обов’язково використовувати це в кожній beginner exercise.

Але запам’ятай.

Good websites care about users.

Не тільки про те, щоб виглядати cool.

Практика

Створи три cards.

Кожна card має:

трохи підніматися on hover;
збільшувати shadow on hover;
animate icon on hover;
використовувати transition;
залишатися readable.

Використай:

transition;
transform;
translateY;
scale;
box-shadow.

Тримай motion small.

Ціль — polish.

Не panic.

Міні-Завдання

Створи pricing section з трьома plans.

Додай:

hover lift effect on cards;
button hover effect;
featured plan з subtle floating icon;
responsive layout;
reduced motion media query.

Це real-world CSS motion.

Small details.

Big difference.

User може не помітити кожну animation свідомо.

Але він відчує, що interface smoother.

Це good design.

Quietly doing its job.

Підсумок

Сьогодні ти дізнався, що:

transitions роблять CSS changes smooth;
transition зазвичай треба ставити на normal state;
transform може move, scale і rotate elements;
translateY useful для hover lift effects;
scale може зробити icons або buttons interactive;
box-shadow можна animate для depth;
@keyframes створює CSS animations;
infinite animations мають бути subtle;
не все має рухатися;
good motion supports usability.

Motion powerful.

Використовуй його carefully.

Трохи movement може зробити website alive.

Занадто багато movement робить його схожим на те, що він втік з cartoon.

Наступний Урок

У наступному уроці ми завершимо курс complete mini project.

Поєднаємо layout, responsive design, cards, buttons і polished styling.

CSS toolbox майже готовий.