Переход нескольких свойств

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

Я помню, что слегка запутался, когда в первый раз начал экспериментировать с переходами на 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;

}

Предположим, что кроме цвета фона хочется также менять цвет самой ссылки и накладывать переход на это изменение. Такого эффекта можно достичь, перечисляя одновременно несколько переходов и разделяя их запятой. На каждый переход можно навесить отдельную продолжительность и собственную временную функцию (рис. 2.03). (Продолжение строки отмечено символом»).

^{Рис. 2.03. Обычное состояние ссылки и состояние: hover}

a.foo {

padding: 5px 10px;

background: #9c3;

‑webkit‑transition: background.3s ease, color 0.2s linear;

‑moz‑transition: background.3s ease, color 0.2s linear;

‑o‑transition: background.3s ease, color 0.2s linear;

transition: background.3s ease, color 0.2s linear;

}

a.foo: hover,

a.foo: focus {

color: #030;

background: #690;

}