CSS Transitions

В предыдущей статье мы познакомились с такими инструментами, как CSS Transitions и Animations. Выяснили, что они нужны для "оживления" интерфейса. Это, как я говорил ранее, опциональные вещи - впечатление на пользователя может произвести интерфейс и без переходов и анимаций, например, если используется необычная верстка на гридах или подобрано забавное сочетание цветов и шрифтов.

В этой статье подробно разберем, как создаются переходы (именно так переводится "transitions"). Тема, в принципе, несложная, главное уловить связь CSS свойства "transition" с остальными свойствами. Причем подробнее всего мы разберем "transition" и "transform" - именно эта связка используется чаще других.

Свойство "transition"

Сначала напишем код (файл "index.html", как обычно), в котором наш элемент будет менять цвет при наведении курсора мыши на него:

Если вы откроете файл в браузере и наведете курсор мыши на элемент, то он поменяет цвет мгновенно. Чтобы сделать плавный переход из одного состояния в другое, добавим свойство "transition" внутри селектора "#transition":

Данное свойство является сокращением для следующих свойств:

1) transition-property. Обязательное. Определяет свойство CSS , где будет применен переход. Вы можете применить переход к отдельному свойству (например, "background-color", как в нашем примере, или "transform", которое мы разберем далее) или ко всем свойствам в наборе правил (т.е. "all"). Пример синтаксиса, если вы захотите указать это свойство отдельно:

div {

transition-property: all;

transition-property: transform;

}

2) transition-duration. Обязательное. Свойство определяет промежуток времени перехода. Вы можете указать в секундах или миллисекундах:

div {

transition-duration: 3s;

}

3) transition-timing-function. Необязательное. Свойство позволяет определить скорость перехода в течение указанной продолжительности (в нашем случае, в течение секунды). Время по умолчанию ease: медленно начинается, быстро ускоряется, а затем замедляется в конце. Другими вариантами синхронизации являются: linear, ease, ease-in, ease-out, и ease-in-out. Но можно указывать свою функцию синхронизации с помощью вызова "cubic-bezier". Чтобы объяснить полноценно смысл написанного в этом пункте, понадобится целая статья. Тем, кто не боится математики и английского языка, рекомендую ознакомиться с этой документацией. Для остальных рекомендую просто в примере подставить все перечисленные варианты (linear, ease, ease-in, ease-out, ease-in-out) и посмотреть, как будет вести себя анимация при этих значениях - для начала хватит и этого.

4) transition-delay. Необязательное (что я продемонстрировал в примере - в нем это свойство не указано). Позволяет вам указать, когда начнется преобразование. По умолчанию переход начинается сразу после его запуска (например, при наведении курсора мыши). Однако, если вы хотите, чтобы переход начался с задержкой, вы можете использовать это свойство. Попробуйте добавить это свойство в наш пример и проверить результат работы в браузере:

transition: background-color 1s ease-in-out 2s;

Закрепим в памяти, что "transition" - сокращение, и при желании код выше можно написать так:

div {

transition-property: background-color; // запуск при изменении цвета фона

transition-duration: 1s; // длительность перехода - 1 секунда

transition-timing-function: ease-in-out // скорость перехода по продолжительности

transition-delay: 2s // задержка - 2 секунды

}

Собственно, сложность свойства "transition" находится только в "transition-timing-function", но этой сложности можно избежать, просто запомнив, как именно себя ведет каждое из значений linear, ease, ease-in, ease-out, ease-in-out.

Теперь разберемся с такой интересной штукой, как свойство "transform" - именно с ним чаще всего используют переходы.

Свойство "transform"

Данное свойство позволяет преобразовать элементы, если точнее, с его помощью вы можете вращать, перемещать, наклонять и масштабировать их:

1) scale. Позволяет увеличить или уменьшить размер элемента. Например, значение 2 будет преобразовывать размер элемента в 2 раза больше исходного. Значение 0.5 будет преобразовывать размер элемента в половину исходного:

Вы можете масштабировать элемент, устанавливая параметры для ширины (ось X) или высоты (ось Y). Например, transform: scaleX(2). Или использовать сокращенный вариант scale() для масштабирования обеих осей одновременно: transform: scale(2). Или определите их независимо друг от друга: transform: scale(2, 4).

2) rotate. Поворачивает элемент по часовой или против часовой стрелки на указанное количество градусов. Положительное значение, например 90deg, вращает элемент по часовой стрелке, а отрицательное значение, например -90deg, вращает его против часовой стрелки. Вы можете вращать более чем на полный оборот с числами более 360, например 1080deg для трех полных вращений:

3) translate. Перемещает элемент влево / вправо и вверх / вниз. Движение основано на параметрах, заданных для осей X (горизонтальная) и Y (вертикальная). Положительное значение X перемещает элемент вправо, а отрицательное значение X перемещает элемент влево. Положительное значение Y перемещает элемент вниз, а отрицательное значение Y вверх. В этом примере элемент переместится на 20 пикселей вправо и на 20 пикселей вниз:

4) skew. Смещает элемент (или наклоняет) в одном или другом направлении на основе значений, заданных для осей X и Y. Положительное значение X наклоняет элемент влево, а отрицательное значение X наклоняет его вправо. Положительное значение Y наклоняет элемент вниз, а отрицательное значение Y - вверх. Или используйте сокращение, чтобы включить оба свойства X и Y:

(Примечание. Перекос элемента также будет искажать все дочерние элементы внутри элемента. Если вам нужно сохранить исходный угол дочернего элемента, вы можете использовать противоположное значение перекоса, чтобы вернуть его обратно.)

Все эти преобразования применяются относительно центра элемента. Если нужно изменить это поведение, используется свойство transform-origin. Например, если вы используете transform: rotate свойство, но хотите, чтобы оно вращалось не из центра, а из верхнего левого угла, вы должны использовать значение 0% 0% или left top. Для нижнего правого угла - 0% 100% или right bottom, и т. д:

Также вы можете комбинировать трансформации, просто перечислив их друг за другом:

Обратите внимание, что все преобразования перечислены для двумерного пространства (X и Y). Для трехмерных преобразований используются трехмерные варианты:

1. transform: translate3d(12px, 50%, 3em) - перемещение элемента по осям X, Y и Z. Можно задать отдельное перемещение для оси Z с помощью translateZ().
2. transform: rotate3d(1, 2.0, 3.0, 10deg) - вращение элемента. Первые три числа указывают вектор вращения в трехмерном пространстве, четвертое - угол поворота. Можно задать отдельное вращение вокруг оси Z с помощью rotateZ().
3. transform: scale3d(2.5, 1.2, 0.3) - масштабирование элемента по трем осям. Можно задать отдельное масштабирование относительно оси Z с помощью scaleZ().

Итого

Как видите, больших трудностей с переходами вы не увидите (не считая попыток разобраться подробнее с transition-timing-function). Главное здесь - понять, как грамотно использовать связку "transition" и "transform", так как именно она используется чаще всего при "оживлении" интерфейса. Рекомендую вам самим поиграться с этими свойствами, меняя длительность, задержку, углы поворота, перемещения по осям во все стороны и так далее.

Однако, хоть такие преобразования и считаются "анимированными", они запускаются только при взаимодействии с элементами. Если же мы хотим создать анимацию в привычном понимании (как последовательность ключевых кадров), нам нужно разобраться с еще одним инструментом - CSS Animations. Этим и займемся в следующей статье.