Css3 переходы. Подробнее о transition-timing-function

CSS3 дарит нам новые красивости и приятности. В некоторых случаях для создания какого-либо необычного эффекта больше не нужно прибегать к использованию flash и javascript. Свойство CSS transition является ярким примером одной из таких ситуаций. Думаю, всем известен псевдокласс:hover. При помощи него меняются значения CSS свойств элемента при наведении на него мышкой. К примеру, был блок серого цвета с черной надписью, навел на него мышкой, и он стал черным с белой надписью.

Вот, как это прописывается:

Blok { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok:hover { background-color:#000000; color:#ffffff; }

А вот, как это выглядит:

Наведи на меня

Можно также сделать, чтобы блок при наведении на него, помимо цвета фона и цвета текста, менял также и ширину. Для этого запишем CSS код так:

Blok1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; } .blok1:hover { background-color:#000000; color:#ffffff; width:355px; }

Вот, как это будет выглядеть в данном случае:

Наведи на меня

Все бы ничего, но, как видите, свойства меняют свои значения слишком резко, в тот же миг, и это выглядит не очень красиво. Что делать? Все очень просто: используем свойство CSS transition .

О свойстве transition

Свойство transition придает переходу от одних стилей к другим плавность. К примеру, цвет блока при наведении на него мышкой изменится не резко, а в течение определенного времени. Transition, кстати, в переводе на русский означает «переход». Свойство имеет следующую запись:

Div { transition:color 1s 1s linear; }

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

Div { transition:color 1s 1s linear; -moz-transition:color 1s 1s linear; -webkit-transition:color 1s 1s linear; -o-transition:color 1s 1s linear; }

В примерах был указан короткий вариант записи, подробный имеет следующий вид:

Div { transition-property:color; transition-duration:1s; transition-delay:1s; transition-timing-function:linear; -moz-transition-property:color; -moz-transition-duration:1s; -moz-transition-delay:1s; -moz-transition-timing-function:linear; -webkit-transition-property:color; -webkit-transition-duration:1s; -webkit-transition-delay:1s; -webkit-transition-timing-function:linear; -o-transition-property:color; -o-transition-duration:1s; -o-transition-delay:1s; -o-transition-timing-function:linear; }

В transition-property задается свойство, на которое будет распространяться действие перехода. К примеру: color, background-color, width, height, left, opacity, visibility и многие другие. Можно указать несколько свойств через запятую. Если вы хотите применить переход сразу для всех возможных свойств, тогда у transition-property следует указать значение all. В transition-duration указывается время, в течение которого будет осуществляться переход, в transition-delay время, через которое переход начнется. В transition-timing-function указывается тип перехода, на этом свойстве остановимся подробнее.

Подробнее о transition-timing-function

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

• linear — скорость перехода не меняется от начала и до конца. Эквивалентна cubic-bezier(0,0,1,1).
• ease — медленный старт, затем ускорение и замедление в конце. Эквивалентна cubic-bezier(0.25,0.1,0.25,1).
• ease-in — медленный старт. Эквивалентна cubic-bezier(0.42,0,1,1).
• ease-out — замедление в конце. Эквивалентна cubic-bezier(0,0,0.58,1).
• ease-in-out — медленный старт и финиш. Эквивалентна cubic-bezier(0.42,0,0.58,1).
• cubic-bezier(n,n,n,n) — позволяет задать собственные значения от 0 до 1.

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

Как видите, в зависимости от того, какое значение имеет свойство transition-timing-function, переход может осуществляться совершенно по-разному. Хотя иногда эта разница является не очень заметной, к примеру, если в transition-duration задано небольшое временное значение, или блок, для которого осуществляется эффект, имеет маленькие габариты и так далее.

Примеры использования свойства transition

Чтобы вам легче было разобраться, как правильно применять свойство transition, приведу несколько примеров. Начну, пожалуй, с самого простого. Помните блок с меняющейся шириной и цветом при наведении на него в самом начале поста? Давайте теперь сделаем тоже самое только с использованием свойства transition.
Пример 1.

Primer_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:all 1s linear; -moz-transition:all 1s linear; -webkit-transition:all 1s linear; -o-transition:all 1s linear; } .primer_1:hover { background-color:#000000; color:#ffffff; width:355px; }

Наведи на меня

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

Primer_1_1 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -moz-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -webkit-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; -o-transition:background-color 1s linear, color 1s 1s ease-in-out, width 1s 2s ease; } .primer_1_1:hover { background-color:#000000; color:#ffffff; width:355px; }

Наведи на меня

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

Primer_2 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; opacity:1; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_2:hover { opacity:0; margin-left:50px; }

Наведи на меня

При помощи свойств opacity и margin-left блок движется и исчезает в течение двух секунд.
Пример 3.
Еще один простой пример. На этот раз у текста появляется тень белого цвета, хотя в данном случае она напоминает скорее подсветку, чем тень, но свойство называется именно так.

Primer_3 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:text-shadow 1s linear; -moz-transition:text-shadow 1s 0 linear; -webkit-transition:text-shadow 1s linear; -o-transition:text-shadow 1s linear; } .primer_3:hover { text-shadow:0 0 15px #ffffff; }

Наведи на меня

Реализовали мы это при помощи свойства text-shadow.
Пример 4.
Немного усложним задачу, заставим блок крутиться.

Primer_4 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding:18px 0; cursor:pointer; text-align:center; transition:transform 1.5s linear; -moz-transition:-moz-transform 1.5s 0 linear; -webkit-transition:-webkit-transform 1.5s linear; -o-transition:-o-transform 1.5s linear; } .primer_4:hover { transform: rotate(360deg); -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); }

Наведи на меня

Согласитесь, смотрится неплохо, и сразу даже не догадаешься, что это удалось сделать лишь посредством CSS. В примере, кстати, использовалось еще одно новое свойство transform. Многие браузеры читают его только при помощи вендорных префиксов. Обратите внимание, что их нужно указывать и в значении свойства transition. Обязательно подпишитесь на , чтобы узнать про свойство transform еще больше. Вскоре ему будет посвящена отдельная статья, как и многим другим свойствам.
Пример 5.
Свойство CSS transition, кстати, неплохо себя показывает и в сочетании с псевдоклассом:active. Блок в данном примере должен будет увеличиваться при нажатии и удержании на нем курсора мыши. Проверим?

Primer_5 { font-size:20px; background-color:#808080; color:#000000; width:325px; padding-top:18px; height:38px; cursor:pointer; text-align:center; transition:all 2s linear; -moz-transition:all 2s 0 linear; -webkit-transition:all 2s linear; -o-transition:all 2s linear; } .primer_5:active { width:375px; height:85px; }

Нажми и держи

Для реализации этого примера нужно было всего лишь увеличить значения ширины и высоты в блоке с псевдоклассом:active.

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

CSS свойство transition позволяет задать все свойства эффекта перехода (переход между двумя состояниями элемента) в одном объявлении.

Это свойство является короткой записью для следующих свойств (список соответствует порядку указания значений):

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

CSS синтаксис:

JavaScript синтаксис:

Object.style.transition = "width 3s ease-out 2s"

Значения свойства

Версия CSS

Наследуется

Анимируемое

Пример использования

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

Последнее обновление: 01.05.2016

Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.

Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:

Итак, здесь анимируется свойство background-color элемента div. При наведении указателя мыши на элемент он будет менять цвет с серого на красный. А при увеении указателя мыши с пространства элемента будет возвращаться исходный цвет.

Чтобы указать свойство как анимируемое, его название передается свойству transition-property

Transition-property: background-color;

Вообще анимировать можно множество разных свойств, такие как color, background-color, border-color. Полный список свойств CSS, которые поддаются анимации, можно найти по адресу www.w3.org/TR/css3-transitions/#animatable-properties

Transition-duration: 2s;

Кроме секунд можно устанавливать значения в миллисекундах, например, 500 миллисекунд:

Transition-duration: 500ms;

И в конце нам надо определить инициатор действия и финальное значение анимируемого свойства background-color. Инициатор представляет действие, которое приводит к изменению одного стиля на другой. В CSS для запуска перехода можно применять псевдоклассы. Например, здесь для создания перехода используется стиль для псевдокласса:hover . То есть при наведении указателя мыши на элемент div, будет срабатывать переход.

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

Также для запуска перехода можно использовать код JavaScript.

Анимация набора свойств

При необходимости мы можем анимировать сразу несколько свойств CSS. Так, в выше приведенном примере изменим стили следующем образом:

Div{ width: 100px; height: 100px; margin: 40px 30px; border: 1px solid #333; background-color: #ccc; transition-property: background-color, width, height, border-color; transition-duration: 2s; } div:hover{ background-color: red; width: 120px; height: 120px; border-color: blue; }

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

Transition-property: background-color, width, height, border-color; transition-duration: 2s, 3s, 1s, 2s;

Подобно тому как в свойстве transition-property через запятую идет перечисление анимируемых свойств, в свойстве transition-duration идет перечисление через запятую временных периодов для анимации этих свойств. Причем сопоставление времени определенному свойству идет по позиции, то есть свойство width будет анимироваться 3 секунды.

Кроме перечисления через запятую всех анимируемых свойств мы можем просто указать ключевое слово all :

Transition-property: all; transition-duration: 2s;

Теперь будут анимироваться все необходимые свойства, которые меняют значения в стиле для псевдокласса:hover .

Функции анимации

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

В качестве значения это свойство может принимать одну из функций:

linear : линейная функция плавности, изменение свойства происходит равномерно по времени

ease : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

ease-in : функция плавности, при которой происходит только ускорение в начале

ease-out : функция плавности, при которой происходит только ускорение в конце анимации

ease-in-out : функция плавности, при которой анимация ускоряется к середине и замедляется к концу, предоставляя более естественное изменение

cubic-bezier : для анимации применяется кубическая функция Безье

Применим функцию ease-in-out:

Для использования кубической Безье в функцию cubic-bezier необходимо передать ряд значений:

Transition-timing-function: cubic-bezier(.5, .6, .24, .18);

Задержка перехода

Свойство transition-delay позволяет определить задержку перед выполнением перехода:

Transition-delay: 500ms;

Временной период также указывается в секундах (s) или миллисекундах (ms).

Свойство transition

Свойство transition представляет сокращенную запись выше рассмотренных свойств. Например, следующее описание свойств:

Transition-property: background-color; transition-duration: 3s; transition-timing-function: ease-in-out; transition-delay: 500ms;

Будет аналогично следующей записи:

Transition: background-color 3s ease-in-out 500ms;

Свойство CSS Transition нужен для установки анимационного перехода из одного состояния в другое. Анимация работает с помощью псевдоэлементов :hover и :active , т.е. при переходе объекта из одного состояния в другое.

Синтаксис CSS transition

transition : [ none | ] || || || ;

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

Примеры со свойством Transition

Пример #1. Анимация в html через transition

Разберем этот пример более более подробно. Свойство transition: all 1s linear отвечает за плавный переход. Если его не писать, то был бы резкий переход. Чтобы вы понимали разницу, ниже представлен пример без анимационного эффекта:

Код transition: all 1s linear означает следующее:

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

Пример #2. Увеличение объекта в html без смещения других объектов

На странице преобразуется в следующее

Теперь объект увеличивается и не происходит смещения других объектов.

Рассмотрим детально какие значения может принимать каждый из параметров

Значения свойств transition

1. Параметр transition-property

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

• all - ко всему объекту (можно опустить, если задано время)
• color - к цвету текста
• background - к цвету фона объекта
• width , height - к изменению габаритов по ширине и высоте соответственно
• none - анимация отсутствует (по умолчанию стоит у каждого элемента)

Для включения нескольких свойств, их можно перечислить через запятую.

2. Параметр transition-duration

Определяет количество времени в течении которого длится трансформация. Измеряется в секунда (s) и милисекундах (ms).

Например

Параметр transition-duration можно задавать отдельным свойством в CSS:

transition-duration : 1s ;

3. Параметр transition-timing-function

Это важнейший параметр, который определяет как изменяется скорость трансформации. Например, в начале с замедленинем, или же в конце.

transition-timing-function : value ;

Где value может принимать значения:

• ease (значение по умолчанию) - замедление во время старта и финиша, равносильно параметру cubic-bezier(0.25, 0.1, 0.25, 1.0)
• linear - равномерная скорость на протяжении всей трансформации, равносильно параметру cubic-bezier(0.0, 0.0, 1.0, 1.0)
• ease-in - замедление в начале, равносильно параметру cubic-bezier(0.42, 0, 1.0, 1.0)
• ease-out - замедление в конце, равносильно параметру cubic-bezier(0, 0, 0.58, 1.0)
• ease-in-out - замедление при старте и в конце (похож на ease, но с другими коэффициентами скорости), равносильно параметру cubic-bezier(0.42, 0, 0.58, 1.0)
• step-start - мгновенный старт, равносильно параметру steps(1, start)
• step-end - мгновенное исполнение в конце, равносильно параметру steps(1, end)
• cubic-bezier(a1,b1,a2,b2) - задание собственного изменения скорости
• steps(a,b) - изменение рывками

Например

4. Параметр transition-delay

Задает время задержки до начала эффекта перехода. Измеряется в секундах (s) и милисекундах (ms)

Например

Пример #3. Разные задержки

Ранее мы уже говорили про возможность задавать разные задержки для трансформаций. Рассмотрим это на примере.

На странице преобразуется в следующее

Пример сложной трансформации с задержками

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

• -ms-transform-origin - для IE9 и старше (младше девятой версии трансформация не поддерживается
• -webkit-transform-origin - для Chrome, Safari, Android и iOS
• -o-transform-origin - для Opera до версии 12.10
• -moz-transform-origin - для Firefox до версии 16.0

Для обращения из JavaScript к свойству CSS transition используется следующая конструкция:

document.getElementById("elementID").style.transition

Переходом называется плавная смена свойств элемента при наведении на него курсора мыши. При использовании псевдокласса :hover изменение происходит мгновенно, transition же позволяет задать продолжительность и метод перехода.

Рассмотрим для начала простой пример. У нас имеется несколько картинок, каждая из них должна поворачиваться на небольшой угол при наведении на неё курсора (пример 1).

Пример 1. Применение transition

Как только мы наводим курсор на любую картинку, она плавно поворачивается на 15 градусов влево (рис. 1).

Рис. 1. Плавный поворот изображения

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

Свойства

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

Transition: transform, border 1s;

Продолжительность анимации

Это время, в течение которого будет длиться движение. Задаётся как в секундах (1s, 0.5s), так и в миллисекундах (100ms).

Задержка анимации

Движение не обязательно должно начинаться немедленно, допустимо добавить в начале небольшую задержку, после завершения заданного времени сразу же начнётся анимация.

Функция времени

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

Рис. 2. Вид функции времени

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

• ease - анимация начинается медленно, затем ускоряется и к концу движения опять замедляется.
• ease-in - анимация медленно начинается, к концу ускоряется.
• ease-out - анимация начинается быстро, к концу замедляется.
• ease-in-out - анимация начинается и заканчивается медленно.
• linear - одинаковая скорость от начала и до конца.

В примере 2 переход применяется для плавного выдвижения панели из-за левого края экрана при наведении на неё курсора мыши.

Пример 2. Использование функции времени

Если у вас возникли вопросы по этому коду, звоните мне по телефону: 555-3298.

В данном примере много стилевых свойств, но они предназначены лишь для создания нужного дизайна. Анимация при наведении курсора мыши делается двумя свойствами - transition задаёт параметры анимации, а left - это свойство, значение которого плавно изменяется со временем (в данном случае в течение одной секунды). Исходно left равно -320px и большая часть панели скрыто за левым краем браузера, виден лишь кусочек. Затем left становится равным нулю и таким образом вся панель становится видна.

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