CSS-анимация с помощью свойства transition

CSS-анимация - это возможность сделать вашу страницу интерактивной и добавить ей определенной привлекательности, которая в свое время стала очень лакомым кусочком для всех верстальщиков. В этой статье мы рассмотрим анимацию с помощью свойства transition, хотя есть еще такие свойства, как @keyframes и animation, которые достойны отдельной статьи.

Свойство transition можно перевести, как переход, т.е. при анимации с помощью этого css-свойства в течение некоторого времени осуществляется плавный переход от начального к конечному значению выбранных для этого свойств.

Большинство браузеров на данный момент поддерживают свойство CSS3 transition, о чем можно получить справку на сайте caniuse.com. Исключение составляют Internet Explorer 6-9 и все версии Opera Mini. Пользователи этих браузеров, к сожалению, не увидят созданной вами анимации.

hover-эффекты с помощью свойства transition

Чаще всего свойство transition применяется для создания hover-эффектов, или эффектов при наведении курсора мыши. Его суть заключается в том, что оно просчитывает изменения между свойствами, заданными для обычного  состояния элемента, и при наведении на него курсора мыши, которое задается с помощью псевдокласса :hover. Это позволяет создавать различные красивости от плавного изменения цвета текста и фона на кнопках-ссылках до наплывающих блоков и сменяющихся картинок. Очень интересные эффекты можно получить, если использовать псевдоэлементы ::before и/или ::after.

Составляющие свойства transition

Свойство transition является составным (обобщенным, или универсальным), что значит, что оно состоит из ряда свойств, которые можно задавать по отдельности. Синтаксис его таков:

Из кода видно, что вы можете использовать 4 свойства. Рассмотрим эти css-свойства по отдельности:

1. transition-property
2. transition-duration
3. transition-timing-function
4. transition-delay

Свойство transition-property

Возможные значения transition-property:

Свойство transition-property задает название css-свойства для анимации перехода. Поскольку нужно просчитать разницу между начальным и конечным значением свойства, то и само свойство должно быть рассчитываемым. Например, можно изменить border-width с 1px до 6px, но нельзя преобразовать border-style из solid в dashed. Также можно уменьшить прозрачность элемента с помощью свойства opacity от значения 1 до 0, но невозможно анимировать переход от свойства visibility: visible к свойству visibility: hidden или от display: block к display: none. Для этого лучше воспользоваться методами show() или hide() библиотеки jQuery. Перечень доступных для анимации свойств можно найти в документации MDN.

Ниже показан код, который меняет цвет фона у div с id="tr-property" с салатного на желтый за 0.8 секунды.

Сам пример вживую:

В свойстве transition-property можно указать несколько значений через  запятую или использовать значение all (все свойства), которое является значением по умолчанию. Также свойство transition-property имеет значение none (ни одно из свойств), которое обычно применяют для отмены анимации, например на мобильных устройствах.

Рассмотрим пример, в котором нужно анимировать несколько свойств:

Обратите внимание, что для div-а с id="tr-property2" свойство border-radius изначально не было задано, оно получило значение в 8px только при наведении (псевдокласс :hover), тем не менее скругление углов тоже было анимированным, т.к. его включили в свойство transition-property, а его начальное значение (0) было взято из значений по умолчанию для border-radius.

Тот же самый пример можно было сократить, использовав в коде свойство all вместо перечисления нескольких свойств для анимации.

Свойство transition-duration

Как вы могли заметить в примерах к свойству transition-property для создания анимации требовалось указать промежуток времени, за который как раз и отвечало свойство transition-duration. Собственно, этих двух свойств вполне достаточно для создания анимации типа transition. Даже скажу больше - вы вообще можете обойтись свойством transition-duration, т.к. transition-property по умолчанию имеет значение all, т.е. все измененные свойства будут анимированы.

Свойство transition-duration измеряется либо в секундах (1s, 1.5s, 0.8s, .5s) или в миллисекундах (1000ms, 1500ms, 800ms, 500ms) . По умолчанию это свойство имеет значение 0, т.е. время на анимацию фактически нет, поэтому, если вы забудете указать это значение, то переход свойств не произойдет.

Код примера для исследования свойства transition-duration таков:

Пример с разной длительностью анимации:

Использование только свойства transition-duration  при hover-эффекте:

Обратите внимание, что в качестве свойства, отвечающего за переход, использовано только transition-duration . Свойство transition-property принимает значение all, которое является значением по умолчанию, поэтому анимации подлежат все измененные свойства.

Результат:

Свойство transition-timing-function

В соответствии с переводом это свойство задаёт временную функцию, которая описывает способ расчета скорости перехода свойств(а) html-элемента от одного значения к другому. По умолчанию свойство имеет значение ease, т.е. анимация происходит с некоторым замедлением.

Варианты свойства transition-timing-function:

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

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

На первом графике показан линейный переход (linear) - анимация происходит равномерно, без задержек в начале или в конце. Второй график отображает функцию ease-in - анимация происходит с замедлением в начале, т.к. именно в начале перехода за  продолжительное время (2 клетки на графике) изменение свойства происходит очень незначительно (полклетки). Третий график отвечает за функцию ease-out - анимация с замедлением в конце. Для него характерно небольшое изменение значения анимируемого свойства за продолжительное время именно к концу анимации, т.е. ситуация и сам график противоположны функции ease-in.

Вариант cubic-bezier - это возможность управлять 2-мя точками графика с помощью маркеров для изменения точек на кривой Безье, которые чаще всего используются дизайнерами при создании векторных форм в таких программах, как Adobe Illustrator или Inkscape. Вам необязательно владеть этими программами, чтобы управлять графиком функции. Вполне достаточно знать, как использовать Инспектор свойств браузера (клавиши F12 или Ctrl + Shift + I). Скриншоты сделаны в браузере Chrome.

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

Потяните за точку в начале или в конце графика и задайте другой вариант управления скоростью анимации transition:

При изменении графика вы получите один из вариантов функции типа cubic-bezier, который отобразится в свойстве transition-timing-function. Если вы удовлетворены результатом, просто скопируйте код в свой редактор, т.к. изменения в Инспекторе свойств продержатся лишь до следующего обновления страницы.

Аналогичным образом можно управлять графиками функций в свойстве transition-timing-function с помощью текстового редактора Brackets. Для того чтобы выполнить редактирование, поставьте курсор в любом месте значения для свойства transition-timing-function и нажмите Ctrl + E.

В редакторе кода Brackets вы также можете воспользоваться перетягиванием одного или обоих маркеров курсором мыши или смещать его после выделения клавишами-стрелками. При изменении значения вы так же, как и в случае с Инспектором свойств, получаете функцию вида cubic-bezier:

Подробнее об основах изменения скорости можно почитать в этой статье.

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

Код для блоков:

Нужно иметь ввиду, что свойство transition-timing-function не наследуется, т.е. для него нельзя использовать значение inherit.

Пример использования функции cubic-bezier() демонстрирует эффект появления подсказок-названий социальных сетей. Они как бы "выпрыгивают" из иконки при наведении на нее курсора мыши.

See the Pen Social Media Icons with Popups (HTML + Pure CSS Only) by Abdelrhman Said (@abdelrhmansaid) on CodePen.

Если вы не хотите самостоятельно управлять графиком скорости анимации перехода или не очень понимаете, в чем заключается разница между ними, можно воспользоваться готовыми графиками и функциями. На сайте easings.net вы можете выбрать различные варианты функции замедления, рассмотрев их графики и посмотреть наглядно, как происходит анимация с выбранной функцией, наведя курсор мыши на график:

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

Для тех, кто любит JavaScript, можно посмотреть на реализацию разных вариантов ease в отдельной статье (англ.).

Свойство transition-delay

Свойство transition-delay позволяет указать задержку в секундах или миллисекундах, после которой будет запущена анимация. Его необязательно  использовать для всех анимаций и даже необязательно  указывать, т.к. по умолчанию transition-delay равен 0s.

Это свойство удобно использовать, когда необходимо, чтобы анимация "сыграла" не сразу, а с некоторым отставанием. В примере ниже мы создадим эффект всплывающей подсказки, которая появляется через 0.3s после наведения курсора на элемент с изображением. При наведении на блок с классом .tr-holder мы будем запускать анимацию для блока с классом .tr-descr. Обратите внимание на то, как записан код: свойства группы transition, в том числе и transition-delay, указаны для .tr-descr, а псевдокласс :hover использован для .tr-holder. При этом изменение свойства bottom все же записано в виде контекстного селектора:

Кроме того, для блока .tr-descr указан курсор в виде руки, как подсказка, что при наведении на этот элемент что-то произойдет.

Еще одна особенность стилей .tr-holder, на которую стоит обратить внимание - это свойство overflow: hidden при заданных свойствах width и height, которое позволяет отсечь все, что выходит за пределы этих ширины и высоты. Именно благодаря этим свойствам мы не видим изначально блока с описанием .tr-descr, т.к. он спрятан внизу за счет использования свойства bottom: -40%.

Посмотрим на сам пример:

Свойство transition-delay

Наведите на картинку ниже

Использование задержки с помощью свойства transition-delay

Обобщенное свойство transition

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

Если вам не нужны все свойства, вы должны указать, как минимум количество секунд или милисекунд для transition-duration:

Задавать анимацию перехода можно для нескольких свойств, указывая их через запятую. Например:

Рассмотрим пример, в котором использованы сразу несколько анимаций - для заголовков 2-го и 3-го уровней и для абзаца. Для каждого из них будет указано обобщенное свойство transition, но с разным набором свойств.

Для заголовка 2-го уровня свойство transition содержит 3 свойства transition-property, transition-duration и  transition-timing-function:

Для заголовка 3-го уровня свойство transition содержит указание свойства и времени на переход ( transition-property и transition-duration):

Для абзаца в свойстве transition использованы 2 свойства - время анимации (transition-duration) и задержка (transition-delay):

Общие правила этого примера таковы:

Сам пример:

Обратите внимание, что для появления заголовка 3-го уровня и абзаца в примере выше было использовано свойство transform. Аналогичным образом можно сдвинуть элементы с абсолютным позиционированием, задавая потом анимацию для координат left, top, right или bottom.  Рассмотрим и этот вариант.

В примере ниже мы анимируем "выезд" ссылки, которая перекрывает весь наш блок, но изначально не видна за счет использования свойства overflow: hidden для родительского блока и left: -110%.

Пример вживую:

Еще один пример появления текста при наведении на блок:

See the Pen card hoverexample by Elen (@ambassador)on CodePen.

Особенности добавления свойства transition

Поскольку свойство transition применяется для hover-эффектов, добавить в код это свойство можно, как для основных правил для html-элемента, id, класса или другого css-селектора, так и для псевдокласса :hover этого селектора. Однако имеет смысл делать это именно в основных свойствах нужного блока, т.к. вы получаете плавный переход как при наведении курсора мыши, так и при уведении его с элемента. Если же вы размещаете свойство transition  только в правилах для псевдокласса :hover анимация при наведении курсора мыши происходит плавно, а при уведении курсора - рывком.

Наведите и уведите курсор мыши на левый и правый блок с изображением и понаблюдайте за разницей в анимационных эффектах.

transition для основных правил

transition только для :hover

Код примера таков:

Анимация появления - исчезновения

Еще один вариант интересной анимации - использовать свойства transition вместе с css-свойством clip-path. Последнее скрывает часть блока или изображения, но при наведении показывает все целиком. Либо мы можем наблюдать обратный результат - сначала видно  все, что есть в блоке, а при наведении курсора мыши видимая часть пропадает, и появляется что-либо еще.

See the Pen Show Posts with clip-path by Elen (@ambassador)on CodePen.

Заинтересовались, как это сделать? Тогда вам стоит еще прочитать статью "Использование свойства clip-path в CSS".

Заключение

Свойство transition очень популярно и на данный момент применяется довольно часто для создания hover-эффектов для различных блоков, особенно для посадочных страниц (Landing page).  Минусом таких эффектов является то, что на тач-устройствах, т.е. мобильных телефонах  и планшетах, эти эффекты не отображаются, т.к. не происходит само событие наведения и уведения курсора мыши.

Также анимация типа transition широко применяется  и в современных JS библиотеках и фреймворках, например, для анимации компонентов во Vue.js.