Эффекты перехода в CSS3

Функция перехода CSS3 позволяет平稳 изменять значения CSS-свойств в течение заданного времени.

Изучение CSS3 переходов

Обычно, когда значение CSS-свойства изменяется, результат呈现 обновляется сразу. Один из примеров - изменение цвета фона кнопки при наведении мыши. В нормальных условиях, когда курсор помещается на кнопку, цвет фона кнопки сразу изменяется от старого значения свойства к новому.

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

Ниже приведен пример того, какbackground-colorАнимация на кнопку HTML при наведении мыши.

button　{
　　　　background:　#fd7c2a;
　　　　/*　Для　Safari　3.0+　*/
　　　　-webkit-transition-property:　background;
　　　　-webkit-transition-duration:　2s;
　　　　
　　　　transition-property:　background;
　　　　transition-duration:　2s;
}
button:hover　{
　　　　background:　#3cc16e;
}

Вы должны указать至少 два свойства transition-property и transition-duration (больше 0), чтобы они производили эффект перехода. Однако, все другиеСвойства переходаОни являются опциональными, так как их значения по умолчанию не предотвращают的发生.

Выполнение нескольких преобразований

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

button　{
　　　　background:　#fd7c2a;
　　　　border:　3px　solid　#dc5801;
　　　　/*　Для　Safari　3.0+　*/
　　　　-webkit-transition-property:　background,　border;
　　　　-webkit-transition-duration:　1s,　2s;
　　　　
　　　　transition-property:　background,　border;
　　　　transition-duration:　1s,　2s;
}
button:hover　{
　　　　background:　#3cc16e;
　　　　border-color:　#288049;
}

Сокращенные свойства перехода

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

Свойства перехода — это сокращенное свойство, которое позволяет одним выражением установить все отдельные свойства перехода (т.е. сокращенные свойства transition-property, transition-duration, transition-timing-function и transition-delay в указанном порядке).

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

button　{
　　　　background:　#fd7c2a;
　　　　-webkit-transition:　background　2s　ease-in　0s;　/*　Для　Safari　3.0+　*/
　　　　transition:　background　2s　ease-in　0s;　
}
button:hover　{
　　　　background:　#3cc16e;
}

Свойства CSS3 для перехода

Ниже в таблице кратко описаны все свойства перехода: