Полная запись перехода

Поддержка в браузерах

Краткая форма записи перехода с задержкой

Краткая форма записи

Задержка перехода

Можно сделать так, чтобы переход осуществлялся не сразу после того, как срабатывает связанное с ним событие, но с некоторой задержкой. Например, сделаем так, чтобы переход цвета фона происходил через полсекунды после того, как ссылка попала в состояние 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, равно как и в более свежих версиях всех остальных браузеров, которые решат поддерживать переходы.

Дата добавления: 2014-11-25