Ниже приводится дополненное объявление перехода, в которое добавлены префиксы
– moz-
и
– o-
, как и основное свойство
transition
. Как обычно, свойство без префикса ставится в самый конец, чтобы у него был наибольший вес, когда это свойство перейдет из состояния черновика в окончательную версию спецификации.
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 {
background: #690;
}
Такая запись позволяет получить сглаживание цвета фона в последних версиях Safari, Chrome и Opera, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы.
Состояния перехода
Я помню, что слегка запутался, когда в первый раз начал экспериментировать с переходами на 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;
}
Переход всех возможных состояний
Вместо того чтобы перечислять несколько свойств, к которым хочется применить переход, можно использовать значение
all
. Тогда переход будет наложен на все возможные свойства.
Заменим перечисление
background
и
color
на значение
all
. Теперь эти переходы получат одинаковую продолжительность и временную функцию.
a.foo {
padding: 5px 10px;
background: #9c3;
– webkit-transition: all 0.3s ease;
– moz-transition: all 0.3s ease;
– o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
a.foo: hover,
a.foo: focus {
color: #030;
background: #690;
}
Использование
all
– удобный способ отследить все изменения, происходящие в состояниях
:hover
,
:focus
,
:active
, который избавляет от необходимости перечислять каждое свойство, нуждающееся в обозначении перехода.
К каким свойствам применим переход
Мы применили переход к свойствам background и color. Но есть много других свойств, на которые можно наложить переход, включая
width
,
opacity
,
position
и
font-size
. Таблица всех свойств (и их типов значений) опубликована на сайте W3C [7] .
Возможность создать полностью гибкое взаимодействие ясна. Мы будем использовать некоторые из этих свойств в сочетании с переходами в примерах следующей главы и далее в книге.