Карта сайта

Урок 30: CSS-переходы

/Уроки по HTML/CSS/Урок 30: CSS-переходы
Урок 30: CSS-переходы
Автор: написал в рубрике Уроки по HTML/CSS. 0 Комментариев.

Это финальный 30-й урок нашего курса. Я я рад, что вы дошли до этого этапа. CSS-переходы это инструмент, который превращает ваши статичные элементы в динамичные, добавляя плавности и интерактивности. Хотите, чтобы кнопка меняла цвет при наведении, а картинка увеличивалась без резких скачков? Тогда этот урок для вас.

Что такое CSS-переходы?

CSS-переходы позволяют плавно изменять значения свойств элемента за определённое время. Например, если вы меняете цвет фона кнопки при наведении, переход сделает это изменение постепенным, а не мгновенным. Это создаёт приятный визуальный эффект, который улучшает пользовательский опыт.

Основное свойство: transition

Свойство transitionэто сокращённая запись для четырёх отдельных свойств:

  1. transition-property — указывает, какое свойство будет анимироваться (например, background-color, opacity, transform).
  2. transition-duration — задаёт длительность перехода в секундах (s) или миллисекундах (ms).
  3. transition-timing-function — определяет кривую скорости анимации (например, ease, linear, ease-in-out).
  4. transition-delay — задержка перед началом перехода.

Пример:

.button {
  transition: background-color 0.3s ease-in-out 0.1s;
}

Этот код означает: «Плавно измени цвет фона кнопки за 0.3 секунды с эффектом замедления в начале и конце, начни анимацию через 0.1 секунды после события».

Эффекты при наведении: псевдокласс :hover

Чаще всего переходы активируются при наведении курсора. Для этого используется псевдокласс :hover. Давайте создадим кнопку, которая плавно меняет фон и размер:

<button class="hover-button">Наведи на меня</button>
.hover-button {
  padding: 15px 30px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  transition: all 0.3s ease; /* Анимируем все изменения */
}

.hover-button:hover {
  background-color: #2ecc71;
  transform: scale(1.1);
}

При наведении кнопка увеличится на 10% и поменяет цвет с синего на зелёный. Обратите внимание на all в свойстве transition — это означает, что все изменения свойств будут плавными. Но так лучше не делать: анимируйте только нужные свойства для оптимизации производительности.

Практические примеры

1. Плавное появление меню

Создадим выпадающее меню, которое плавно появляется при наведении:

<div class="menu">
  Наведи меня
  <ul class="submenu">
    <li>Пункт 1</li>
    <li>Пункт 2</li>
    <li>Пункт 3</li>
  </ul>
</div>
.menu {
  position: relative;
  padding: 20px;
  background-color: #f1c40f;
}

.submenu {
  opacity: 0; /* Скрываем меню */
  visibility: hidden;
  position: absolute;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.menu:hover .submenu {
  opacity: 1; /* Показываем меню */
  visibility: visible;
}

Здесь мы анимируем не только прозрачность (opacity), но и visibility, чтобы меню полностью исчезало из DOM.

2. Интерактивная карточка

Добавим эффект «поднятия» для карточки при наведении:

.card {
  width: 300px;
  padding: 20px;
  background-color: white;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

Карточка приподнимается, а тень становится более выраженной, создавая эффект глубины.

Распространённые ошибки

  1. Забывают указать transition-duration. Без этого свойства анимация не сработает.
  2. Используют свойства, которые нельзя анимировать. Например, display или font-family.
  3. Злоупотребляют all. Это может замедлить страницу. Всегда указывайте конкретные свойства.

Практические задачи

Закрепите знания на практике:

  1. Создайте кнопку, которая при наведении плавно меняет цвет текста и добавляет подчёркивание.
  2. Реализуйте картинку, которая увеличивается на 20% при наведении, но не выходит за границы родительского контейнера.
  3. Сделайте блок, который плавно появляется сверху при наведении на триггер.

Вы освоили CSS-переходы, мощный инструмент для создания интерактивных интерфейсов. Не бойтесь экспериментировать с разными свойствами и временными функциями. Чтобы стать профессионалом, практикуйтесь как можно больше.

Если вы хотите изучить HTML и CSS от основ до продвинутых техник, присоединяйтесь к моему полному курсу: HTML/CSS для начинающих

Не останавливайтесь на достигнутом, впереди ещё много интересного.