Полная запись перехода
Поддержка в браузерах
Краткая форма записи перехода с задержкой
Краткая форма записи
Задержка перехода
Можно сделать так, чтобы переход осуществлялся не сразу после того, как срабатывает связанное с ним событие, но с некоторой задержкой. Например, сделаем так, чтобы переход цвета фона происходил через полсекунды после того, как ссылка попала в состояние hover. Такого поведения можно добиться свойством transition‑delay .
a.foo {
padding: 5px 10px;
background: #9c3;
‑webkit‑transition‑property: background;
‑webkit‑transition‑duration: 0.3s;
‑webkit‑transition‑timing‑function: ease;
‑webkit‑transition‑delay: 0.5s;
}
a.foo: hover {
background: #690;
}
Можно существенно упростить объявление перехода (в котором нет задержки), пользуясь свойством transition. Такой синтаксис будет использоваться во всех остальных примерах этой книги.
a.foo {
padding: 5px 10px;
background: #9c3;
‑webkit‑transition: background 0.3s ease;
}
a.foo: hover {
background: #690;
}
Мы получили намного более компактное правило, которое дает точно такой же результат.
Если нужно добавить полусекундную задержку в краткую запись перехода, ее продолжительность ставится в конец правила:
a.foo {
padding: 5px 10px;
background: #9c3;
‑webkit‑transition: background 0.3s ease 0.5s;
}
a.foo: hover {
background: #690;
}
Разумеется, эти замечательные переходы прекрасно действуют в браузерах, работающих на движке WebKit. Что насчет остальных?
Как упоминалось ранее, переходы были изначально разработаны для движка WebKit и включены в Safari и Chrome начиная с версии 3.2, но Opera также поддерживает их начиная с 10.5 (http://bkaprt.com/css3/4/)[5]. Поддержка заявлена и в Firefox 4.0 (http://bkaprt.com/css3/5/)[6].
Учитывая поддержку переходов на сегодняшний день и в ближайшем будущем, важно перечислять все требуемые браузерные префиксы, чтобы переходы работали в большем количестве браузеров по мере появления поддержки.
Ниже приводится дополненное объявление перехода, в которое добавлены префиксы ‑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, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы.