Вы здесь: Главная » CSS » CSS-анимация с помощью свойства transition

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

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

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

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

Поддержка браузерами css3 transition

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

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

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

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

Наведите на блок ниже

transition-property
несколько свойств

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

Наведите на блок ниже

transition-property: 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

0 .7s
1.5s
2.5s

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

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

Результат:

Используем transition-duration

hover me

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

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

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

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

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

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

linear ease-in ease-out

Вариант 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:

Управление маркерами графика функции в Brackets

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

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

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

Example 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis aliquam molestiae vitae possimus, nesciunt aliquid quaerat sint illum? Vel libero ducimus quidem nesciunt.

Example 2

Aspernatur assumenda culpa totam eligendi asperiores, nesciunt enim dignissimos ab perspiciatis, nisi saepe. Error et veniam natus magnam delectus nostrum corporis maiores!

Example 3

Architecto asperiores modi cum aliquid labore, quasi impedit quis velit similique adipisci sunt molestiae soluta at nam eligendi ad dignissimos temporibus.

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

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

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

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

Название функции Аналог функции в виде cubic-bezier
easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)
easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)
easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)
easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)
easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)
easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)
easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)
easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)
easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)
easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)
easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)
easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)
easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)
easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)
easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)
easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)
easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)
easeInOutExpo cubic-bezier(1, 0, 0, 1)
easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)
easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)
easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)
easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)
easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)
easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

Свойство 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

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

RWD
Использование задержки с помощью свойства 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):

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

Сам пример:

Свойство группы transition №1

transition-property

Свойство, которое необходимо анимировать.

Свойство группы transition №2

transition-duration

Свойство, задающее время анимации перехода.

Свойство группы transition №3

transition-timing-function

Функция, описывающая способ расчета скорости перехода свойств.

Свойство группы transition №4

transition-delay

Свойство, задающее задержку перед запуском анимации.

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

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

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

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

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

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

headphones-02

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

headphones-01

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

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

Заключение

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

1 Комментарий

  1. Хорошая статья ! Спасибо !

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

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