Page 199 - Сила CSS3 Освой новейший стандарт

Динамическая подсветка разделов страницы • 199

нативной технологией вы сравниваете реализацию CSS — например, анимация
Flash обычно меньше нагружает процессор, чем эквивалент на CSS3. Поэтому снова
повторюсь: используйте переходы и анимацию только для относительно простых
эффектов и тщательно тестируйте их.

Я не утверждаю, что переходы и анимация CSS — это панацея от всех бед, и что
у них нет недостатков. Однако это еще один отличный инструмент в вашем арсенале,
который можно применять в подходящих ситуациях, соблюдая определенные меры
предосторожности. Давайте взглянем, как это делается, прямо сейчас.

Усиление яркости цвета с помощью переходов CSS
Первый вариант усиления яркости фонового цвета активного заголовка подразуме-
вает использование переходов. Фактически это простейший тип анимации CSS.
Переходы позволяют гладко и постепенно заменять один стиль элемента другим,
в противоположность резкой смене стиля. Это происходит, когда к элементу под-
водится указатель мыши, он выбирается в качестве цели или его состояние меня-
ется любым другим способом.

Для того чтобы применить переход, нужно
сказать браузеру, какое свойство он должен Очень полезная демонстра-
постепенно поменять (свойство transition- ция работы каждой из функ-
property) и сколько секунд должно длиться ций расчета времени приво-
изменение (transition-duration). Также при дится на странице http://css3.
желании можно задержать начало перехода bradshawenterprises.com.
(transition-delay) и настроить скорость из-
менения на всем протяжении перехода (transition-timing-function).
Все эти свойства можно объединить в одном составном свойстве transition. До-
бавьте его, а также три эквивалента для разных браузеров, к правилу h2:
h2 {
clear: left;
margin: 0 0 -.14em 0;
color: #414141;
font-family: Prelude, Helvetica, "Helvetica Neue",
Arial, sans-serif;
font-size: 2.17em;
font-weight: bold;
-moz-transition: background-color 1s ease-out;
-o-transition: background-color 1s ease-out;
-webkit-transition: background-color 1s ease-out;
transition: background-color 1s ease-out;
}

В этом коде мы сообщаем браузеру, что каждый раз, когда значение background-
color для элемента h2 меняется, это нужно делать постепенно в течение одной
секунды. Мы также указали функцию transition-timing-function — ease-out —
для того чтобы анимированный эффект постепенно замедлялся к концу.

www.trk.kg