Учебник по переходам CSS

В этом уроке мы рассмотрим, как анимировать компоненты с помощью CSS-переходов!

Переход происходит, когда мы указываем значение свойства CSS, которое должно измениться в течение определенного периода времени.

Мы делаем это с помощью свойства transition, которое является сокращением следующих свойств:

  • transition-property
  • transition-duration
  • transition-timing-function
.element {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это эквивалентно:

.element {
  transition: property duration timing-function delay;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Свойства перехода

transition-property — это свойство, к которому вы хотите перейти.

transition-duration — это длительность перехода. Значение указывается в секундах (например, 5s для 5 секунд).

transition-timing-function — это то, как происходит переход. Мы рассмотрим это позже.

transition-delay — это сколько времени вы хотите подождать перед началом длительности. Опять же, значение указывается в секундах (например, 5s для 5 секунд).

Активация переходов

Вы можете активировать CSS-переход с помощью псевдокласса :hover (когда мышь наводится на элемент), :focus (когда пользователь наводит курсор на элемент ввода или нажимает на него) или :active (когда пользователь нажимает на элемент).

Рассмотрим пример:

.button {
  background-color: green;
  transition: background-color 2s ease-out;
}
.button:hover {
  background-color: gold;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Что такое функция transition-timing-function?

Функция transition-timing-function определяет, как происходит переход. По умолчанию все переходы установлены на linear, что означает, что свойство изменяется равномерно в течение всего перехода.

Например:

.element {
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Это то же самое, что:

.element {
  transition: transform 1s linear;
}
Войти в полноэкранный режим Выйти из полноэкранного режима

Существует несколько значений, которые мы можем использовать для нашей transition-timing-function:

Давайте посмотрим их в действии:

Переход нескольких свойств

Мы можем переходить сразу к нескольким свойствам, разделяя их запятой.

.element {
  transition: color 2s ease-out,
              background-color 2s ease-out;
}
Вход в полноэкранный режим Выход из полноэкранного режима

Какие свойства можно анимировать?

Много! Вот полный список здесь.

Заключение

Если вам понравилась эта статья, следуйте за мной в Twitter, где я ежедневно пишу о вещах, связанных с техникой!
Если вам понравилась эта статья и вы хотите оставить совет — нажмите здесь

🌎 Давайте общаться

  • Портфолио

  • Twitter

  • LinkedIn

  • Hashnode

  • Devto

  • Medium

  • Github

  • Codepen

Оцените статью
devanswers.ru
Добавить комментарий