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

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

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

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

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

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

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

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

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

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

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

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

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

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

Демо на CodePen.

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

Демо на CodePen.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Демо на CodePen.

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

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

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

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

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

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

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

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

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

Поэтому в примере выше при наведении мыши на кнопку, цвет фона изменится через 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 class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree