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

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

Этим мы говорим браузеру, что на элементе должна выполняться анимация fade
(свойство -webkit-animation-name); длиться она должна две секунды (свойство
-webkit-animation-duration) и выполняться единожды (свойство -webkit-
animation-iteration-count). Мы также использовали функцию расчета времени
ease-in, для того чтобы анимация, медленная в начале, ускорялась к концу.
Все эти свойства можно объединить в одном составном свойстве animation. В пра-
виле h2:target объедините свойства с префиксом -webkit- в свойстве -webkit-
animation и добавьте свойство без префикса animation:
h2:target{
padding: 0;
background: none;
-webkit-animation: fade 2s ease-in 1;
animation: fade 2s ease-in 1;
}

Второе правило h2:target также удаляет пустое пространство слева и фоновый
цвет, объявленный в первом правиле. Если этого не сделать, анимационный про-
цесс выполнится один раз, а затем, когда он закончится, на странице отобразится
фоновый цвет элемента h2 — под заголовком внезапно появится и останется полоса
голубого цвета. Для того чтобы анимационный процесс полностью контролировал
фон элемента, у заголовка не должно быть никакого фонового цвета; мы хотим, что-
бы после завершения анимации текст заголовка отображался на прозрачном фоне,
и мы видели под ним линованный лист, как и подо всем остальным содержимым.
Удалять пустое пространство слева, с другой стороны, необязательно. Я решила
избавиться от пустых символов, поскольку, по моему мнению, нет смысла смещать
текст после того, как фоновая подсветка вспыхнула и погасла. Можно было бы, ко-
нечно, анимировать и движение текста тоже, уменьшая количество пустых символов
с десяти до нуля (так же как до этого мы увеличили их число с помощью перехода).
Однако я обнаружила, что в данной ситуации движение заголовка лишь отвлекает.
Оно хорошо смотрится при усилении яркости фонового цвета, но обратный процесс
кажется лишним. В итоге я выбрала наиболее простой вариант и вообще отказалась
от игр с пустым пространством слева от текста заголовка.
Сохраните страницу и откройте ее в Safari или Chrome. Если щелкнуть на ссылке
в оглавлении, фон выбранного заголовка немедленно окрасится голубым цветом,
который затем постепенно растворится (выглядит аналогично последовательности
на рис. 5.17, но в обратную сторону).
Было бы еще лучше, если бы голубой цвет на мгновение замирал и только после
этого начинал растворяться. Свойство animation-delay позволяет задержать начало
анимации, однако для нашей ситуации оно не подходит, так как первоначально у
заголовка вообще нет никакого фонового цвета. До начала анимации пользователь
будет видеть не голубой фоновый цвет, а прозрачный — заголовок будет отобра-
жаться просто поверх линованного листа.

www.trk.kg