Метод использования и примеры CSS3 transition

Свойство CSS transition позволяет вам определить переход между двумя состояниями эффекта элементов. Этоtransition-property,transition-duration,transition-timing-functionиtransition-delayКраткие свойства

В таблице приведено описание использования и истории версий этого свойства, а также синтаксис использования этого свойства в скриптах JavaScript.

Использование синтаксиса transition

Грамматика этого атрибута wygląda следующим образом:

transition:　transition1　[,　transition2, ... transitionN]　|　initial　|　inherit
　　　　　　　　　　　　где transition:　[　transition-property　|　transition-duration　|　transition-timing-function　|　transition-delay　]

Ниже приведен пример того, как использовать атрибут transition.

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

Значение атрибута

В таблице ниже описаны значения этого атрибута.

Совместимость браузеров

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

Дополнительное чтение

Пожалуйста, обратитесь к следующим учебникам:CSS3 Transitions.

Связанные атрибуты:transition-delay,transition-duration,transition-property,transition-timing-function.