Объяснение CSS переходов

Объяснение CSS переходов

От автора: простейший способ анимировать компоненты – сделать это через CSS переходы. В этой статье вы узнаете, как работают CSS переходы, а также как с их помощью создать анимацию. Переход осуществляется, когда CSS свойство меняет свое значение за определенный промежуток времени.

Создать CSS переход можно с помощью свойства transition:

.selector {
  transition: property duration transition-timing-function delay;
}

Свойство transition – это сокращение от 4 свойств transition-property, transition-duration, transition-timing-function, transition-delay.

.selector {
  transition-property: property;
  transition-duration: duration;
  transition-timing-function: timing-function;
  transition-delay: delay

  /* The transition property is the shorthand for the above four properties */
  transition: property duration timing-function delay;
}

transition-property отвечает за CSS свойство, которое вы хотите анимировать. В сокращении transition оно обязательно.

transition-duration – длительность перехода. Сколько по времени должен длиться переход? Значение пишется в секундах с суффиксом s (3s). В transition оно также обязательно.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

transition-timing-function – способ выполнения перехода. Более подробно чуть позже.

transition-delay – задержка перед выполнением. Значение пишется в секундах с суффиксом s (3s). transition-delay не обязательное свойство в сокращении transition.

Вызов переходов

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

/* creating transitions directly in CSS */
.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
}

.button:hover {
  background-color: #1ce;
}

Демо на CodePen.

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

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
}

.button.is-active {
  color: #1ce;
}
const button = document.querySelector('.button')
button.addEventListener('click', _ => button.classList.toggle('is-active'))

Демо на CodePen.

Понятие transition-timing-function

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

.selector {
  transition: transform 1s linear;

  /* OR */
  transition-property: transform;
  transition-duration: 1s;
  transition-timing-function: linear;
}

Но в жизни все нелинейно. Так реальные объекты не двигаются. Иногда мы ускоряемся, иногда замедляемся. transition-timing-function позволяет все это делать.

Представьте, что бросаете теннисный мяч в открытое поле. Мяч покидает вашу ладонь с максимальной скоростью. По мере движения он теряет энергию, замедляется и в конце останавливается. Это называется ease-out. Для такого движения есть тайминг функция.

.selector {
  transition-timing-function: ease-out;
}

Теперь представьте, что вы в машине. Она пока что не движется. Когда вы едете в машине, она ускоряется до своей предельной скорости. Это называется ease-in. Для этого движения также есть своя тайминг функция.

.selector {
  transition-timing-function: ease-in;
}

У вас есть ease-in и ease-out, но есть тайминг функция, объединяющая оба варианта ease-in-out. (не советую использовать ease-in-out в переходах, если они длятся менее секунды. Объект не успеет ни ускориться, ни затормозить. Это просто будет смотреться странно.)

.selector {
  transition-timing-function: ease-in-out;
}

Ниже демо по уже выученными тайминг функциям:

Если вам не понравились варианты выше, вы можете создать свою функцию через cubic-bezier.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Создание своей тайминг функции с помощью cubic-bezier

Cubic-bezier – это набор из четырех значений, определяющих transition-timing-function. Пример:

.selector {
  transition-timing-function: cubic-bezier(x1, y1, x2, y2);
}

Не беспокойтесь о x1, y1,, x2 и y2. Вам не придется создавать кривую Безье самостоятельно (если вы уже не знаете, что они значат, и вы подстраиваете готовую функцию).

Можете положиться на инструменты разработчика в Chrome и Firefox при создании кривых. Для использования необходимо добавить transition-timing-function в элемент, после чего открыть панель разработчика и кликнуть на тайминг функцию.

Объяснение CSS переходов

Демо на CodePen.

Подробный разбор кривых Безье выходит за рамки этого урока. Если вам интересна тема, можете подробно ее изучить в статье Понятие CSS тайминг функций от Stephen Greig.

Переход двух и более свойств

Можно осуществлять переход двух и более свойств, разделяя их запятой в свойстве transition или transition-property.

То же самое можно делать с длительностью, тайминг функциями и задержкой. Если значения одинаковые, можно объявить только одно.

.selector {
  transition: background-color 1s ease-out,
 color 1s ease-out;

  /* OR */
  transition-property: background, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
}

Возможно, вы захотите добавить переход на все свойства через all. Никогда не делайте этого. Это сильно влияет на производительность. Всегда задавайте свойство для перехода.

/* DON'T EVER DO THIS */
.selector {
  transition-property: all
}

/* ALWAYS DO THIS */
.selector {
  transition-property: background-color, color, transform;
}

Переход внутрь и переход наружу

Иногда хочется, чтобы свойства переходили внутрь и наружу по-разному. Нужны разные длительность, тайминг функции и задержки.

Для этого необходимо написать еще один набор свойств transition-.

.button {
  background-color: #33ae74;
  transition: background-color 0.5s ease-out;
}

.button:hover {
  background-color: #1ce;
  transition-duration: 2s;
}

При написании переходов внутрь классов-триггеров (псевдо), свойства перехода в триггер-классе переписывают оригинальные свойства перехода, заданные в основном классе.

Поэтому в примере выше при наведении мыши на кнопку, цвет фона изменится через 2 секунды с #33ae74 на #1ce.

Если убрать курсор с кнопки, фон меняется уже за 0.5 секунды обратно на #1ce, так как transition-duration на 2s уже не существует.

Заключение

CSS переходы – простейший способ создания анимации. Их можно создавать как через сокращение transition, так и через свойства transition-.

Для создания перехода необходимо переписать свойство в классе (или псевдоклассе), а также добавить это свойство в переход в свойстве transition или transition-property.

Источник: https://zellwk.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного лендинга с нуля!

Научитесь с нуля верстать адаптивные лендинги на HTML5 и CSS3 за ближайшие 6 дней

Узнать подробнее

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree