Состояния перехода

Состояния перехода

Я помню, что слегка запутался, когда в первый раз начал экспериментировать с переходами на CSS. Казалось, что было бы логичнее расположить объявление перехода в тот фрагмент кода, где определяется состояние :hover. Оказывается, что элемент может находиться и в других состояниях – не только в :hover – и наверняка захочется, чтобы переход происходил в каждом состоянии без дублирования кода.

Например, можно наложить переход на состояния :focus и :active. Нам не придется добавлять объявление перехода в описание каждого свойства, так как параметры перехода указываются лишь один раз – для основного состояния элемента.

Следующий пример добавляет точно такое же переключение фона для состояния :focus.

Таким образом, переход произойдет либо от того, что на ссылку наведут курсор, либо от того, что на нее будет наведен фокус (например, клавиатурой).

a.foo { 

padding: 5px 10px;

background: #9c3;

-webkit-transition: background 0.3s ease;

-moz-transition: background 0.3s ease;

-o-transition: background 0.3s ease;

transition: background 0.3s ease;

}

a.foo: hover,

a.foo: focus {

background: #690;

}