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="ru">
<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 почти готов.