Переходы

CSS3 переходы обеспечивают плавные переходы из одного состояния в другое при наведении курсора мыши на элемент. Наиболее часто используются для стилизации ссылок и кнопок в состоянии :hover или :focus. 
Поддержка

    IE: 10.0
    Firefox: 16.0, 4.0 -moz-
    Chrome: 26.0, 4.0 -webkit-
    Safari: 6.1, 3.1 -webkit-
    Opera: 12.1, 11.6 -o-
    iOS Safari: 7.1
    Opera Mini: —
    Android Browser: 4.4, 4.1 -webkit-
    Chrome for Android: 44

1.1 Название свойства

Содержит название CSS-свойств, к которым будет применен эффект перехода. Не наследуется.

transition-property
Значения:
none Отсутствие свойства для перехода.
all Применяет эффект перехода ко всем свойствам элемента.
свойство Определяет список свойств, перечисленных через запятую, участвующих в переходе.
inherit Наследует это свойство от родительского элемента.

Синтаксис

	div {
width: 100px;
-webkit-transition-property: width;
transition-property: width;
}
div:hover {
width: 300px;
}

1.2. Продолжительность перехода

Задает промежуток времени, в течение которого должен осуществляться переход. Не наследуется.

transition-duration
Значения:
время Время перехода указывается в секундах или миллисекундах, например, 2s или 5ms.
inherit Наследует это свойство от родительского элемента.

Синтаксис

    div {
-webkit-transition-duration: 5s;
transition-duration: 5s;
}

1.3. Скорость перехода

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

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 для кривой ускорения. На этом сайте вы сможете построить любую траекторию перехода.
inherit Наследует это свойство от родительского элемента.

Синтаксис

    div {
    -webkit-transition-timing-function: linear;
    transition-timing-function: linear;
    }

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

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

transition-delay
Значения:
время Время задержки перехода указывается в секундах или миллисекундах.
inherit Наследует это свойство от родительского элемента.

Синтаксис

    div {
-webkit-transition-delay: .5s;
transition-delay: .5s;
}

1.5 Краткая запись перехода

Все свойства, отвечающие за изменение внешнего вида элемента, можно объединить в одно свойство transition 
    {transition: transition-property transition-duration transition-timing-function transition-delay;}

Если воспользоваться значениями по умолчанию, то запись 

    div {
       transition: 1s;
    }

будет эквивалентна 

    div {
       transition: all 1s ease 0s;
    }

1.6. Плавный переход нескольких свойств

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

    div {
transition: background 0.3s ease, color 0.2s linear;
}
или 
    div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}