От автора: простейший способ анимировать компоненты – сделать это через CSS переходы. В этой статье вы узнаете, как работают CSS переходы, а также как с их помощью создать анимацию. Переход осуществляется, когда CSS свойство меняет свое значение за определенный промежуток времени.
Создать CSS переход можно с помощью свойства transition:
|
1 2 3 |
.selector { transition: property duration transition-timing-function delay; } |
Свойство transition – это сокращение от 4 свойств transition-property, transition-duration, transition-timing-function, transition-delay.
|
1 2 3 4 5 6 7 8 9 |
.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 оно также обязательно.
transition-timing-function – способ выполнения перехода. Более подробно чуть позже.
transition-delay – задержка перед выполнением. Значение пишется в секундах с суффиксом s (3s). transition-delay не обязательное свойство в сокращении transition.
Вызов переходов
CSS переходы можно вызывать напрямую через псевдоклассы :hover (активирует переход при наведении мыши на элемент), :focus (активирует переход, когда пользователь переключает фокус на элемент или при клике на поле ввода) или :active (активирует переход при клике на элемент).
|
1 2 3 4 5 6 7 8 9 |
/* creating transitions directly in CSS */ .button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button:hover { background-color: #1ce; } |
Демо на CodePen.
CSS переходы также можно вызывать через JS, добавляя и удаляя классы.
|
1 2 3 4 5 6 7 8 |
.button { background-color: #33ae74; transition: background-color 0.5s ease-out; } .button.is-active { color: #1ce; } |
|
1 2 |
const button = document.querySelector('.button') button.addEventListener('click', _ => button.classList.toggle('is-active')) |
Демо на CodePen.
Понятие transition-timing-function
transition-timing-function управляет поведением перехода. По умолчанию у всех переходов задано linear, что значит, что свойство изменяется равномерно до конца перехода.
|
1 2 3 4 5 6 7 8 |
.selector { transition: transform 1s linear; /* OR */ transition-property: transform; transition-duration: 1s; transition-timing-function: linear; } |
Но в жизни все нелинейно. Так реальные объекты не двигаются. Иногда мы ускоряемся, иногда замедляемся. transition-timing-function позволяет все это делать.
Представьте, что бросаете теннисный мяч в открытое поле. Мяч покидает вашу ладонь с максимальной скоростью. По мере движения он теряет энергию, замедляется и в конце останавливается. Это называется ease-out. Для такого движения есть тайминг функция.
|
1 2 3 |
.selector { transition-timing-function: ease-out; } |
Теперь представьте, что вы в машине. Она пока что не движется. Когда вы едете в машине, она ускоряется до своей предельной скорости. Это называется ease-in. Для этого движения также есть своя тайминг функция.
|
1 2 3 |
.selector { transition-timing-function: ease-in; } |
У вас есть ease-in и ease-out, но есть тайминг функция, объединяющая оба варианта ease-in-out. (не советую использовать ease-in-out в переходах, если они длятся менее секунды. Объект не успеет ни ускориться, ни затормозить. Это просто будет смотреться странно.)
|
1 2 3 |
.selector { transition-timing-function: ease-in-out; } |
Ниже демо по уже выученными тайминг функциям:
Если вам не понравились варианты выше, вы можете создать свою функцию через cubic-bezier.
Создание своей тайминг функции с помощью cubic-bezier
Cubic-bezier – это набор из четырех значений, определяющих transition-timing-function. Пример:
|
1 2 3 |
.selector { transition-timing-function: cubic-bezier(x1, y1, x2, y2); } |
Не беспокойтесь о x1, y1,, x2 и y2. Вам не придется создавать кривую Безье самостоятельно (если вы уже не знаете, что они значат, и вы подстраиваете готовую функцию).
Можете положиться на инструменты разработчика в Chrome и Firefox при создании кривых. Для использования необходимо добавить transition-timing-function в элемент, после чего открыть панель разработчика и кликнуть на тайминг функцию.
Демо на CodePen.
Подробный разбор кривых Безье выходит за рамки этого урока. Если вам интересна тема, можете подробно ее изучить в статье Понятие CSS тайминг функций от Stephen Greig.
Переход двух и более свойств
Можно осуществлять переход двух и более свойств, разделяя их запятой в свойстве transition или transition-property.
То же самое можно делать с длительностью, тайминг функциями и задержкой. Если значения одинаковые, можно объявить только одно.
|
1 2 3 4 5 6 7 8 9 |
.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. Никогда не делайте этого. Это сильно влияет на производительность. Всегда задавайте свойство для перехода.
|
1 2 3 4 5 6 7 8 9 |
/* DON'T EVER DO THIS */ .selector { transition-property: all } /* ALWAYS DO THIS */ .selector { transition-property: background-color, color, transform; } |
Переход внутрь и переход наружу
Иногда хочется, чтобы свойства переходили внутрь и наружу по-разному. Нужны разные длительность, тайминг функции и задержки.
Для этого необходимо написать еще один набор свойств transition-.
|
1 2 3 4 5 6 7 8 9 |
.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.
Источник: //zellwk.com/
Редакция: Команда webformyself.
