По умолчанию все преобразования происходят моментально для все свойств. Чтобы изменить свойства перехода имеются свойства: transition-property, transition-duration, transition-timing-function, transition-delay и универсальное свойство transition.
transition-property — Содержит название CSS-свойств, к которым будет применен эффект перехода. Эти CSS-свойства перечисляются через запятую. Также имеются специальные свойства none, all, initial и inherit. По умолчанию = all.
transition-duration — задаёт промежуток времени, в течение которого должен осуществляться переход. задается в s и ms.
transition-delay — задержка начала изменений. Также задерживается и возврат к исходному состоянию.
transition-timing-function — задаёт временную функцию, которая описывает скорость перехода объекта от одного значения к другому. Если вы определяете более одного перехода для элемент, например, цвет фона элемента и его положение, вы можете использовать разные функции для каждого свойства.
- ease — Функция по умолчанию, переход начинается медленно, разгоняется быстро и замедляется в конце. Соответствует cubic-bezier(0.25,0.1,0.25,1).
- linear Переход происходит равномерно на протяжении всего времени, без колебаний в скорости. Соответствует cubic-bezier(0,0,1,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(x1, y1, x2, y2) Позволяет вручную установить значения от 0 до 1 для кривой ускорения.
transition — универсальное свойство, позволяющее одновременно задать все параметры перехода.
transition: <переход> [, <переход> ]*
<переход> = [ none | <transition-property> ] || <transition-duration> ||
<transition-timing-function> || <transition-delay>
Пример:
transition: transform .5s ease-in 1s,
background-color .2s ease-in .5s;
transition: all .5s;Если в свойстве transition-property перечислены несколько свойств, то в свойствах transition-duration и transition-delay можно через запятую задать время для каждого свойства. Если указать одно значение, оно применится для всех свойств.