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

204 • Глава 5. Повышение эффективности за счет псевдоклассов

если бы такой эффект можно было воплотить с помощью переходов, так как они
поддерживаются браузерами лучше, чем анимация (помните, в настоящее время
анимацию поддерживает только Webkit). К сожалению, в данной ситуации переходы
нам не помогут, так как фоновый цвет заголовка должен меняться с прозрачного
(до выбора его целевым) на голубой (когда заголовок выбирается целью) и снова
на прозрачный (через секунду после выбора его целью). Изменение включает три
состояния, а переход осуществляется только между двумя значениями.
Анимация CSS3 может охватывать любое количество значений. Вы просто задаете
последовательность ключевых кадров, или точек анимационного процесса, каждый из
которых характеризуется собственным набором стилей, а браузер затем плавно пере-
водит один ключевой кадр в другой, постепенно меняя значения всех свойств кадров.
Для создания анимации в CSS первым делом необходимо присвоить анимацион-
ному процессу имя и указать, что должно происходить в каждом ключевом кадре.
Для этого используется правило @keyframes, но так как пока что его поддерживает
только Webkit, мы должны будем создать два правила: одно с браузерным префиксом
-webkit- и одно без префикса, для обеспечения совместимости в будущем. Добавьте
на страницу следующее новое правило CSS:
@-webkit-keyframes fade {
0% {background: hsla(203,78%,36%,.2);}
100% {background: none;}
}
@keyframes fade {
0% {background: hsla(203,78%,36%,.2);}
100% {background: none;}
}
Здесь мы присваиваем анимационному эффекту имя fade и создаем два ключевых
кадра: один в самом начале процесса (0% анимационного процесса) и второй в самом
конце (100% анимационного процесса). Вместо значений 0% и 100% для указания
начального и конечного состояний можно было бы использовать ключевые слова
from и to.
Итак, мы знаем, что должен делать наш анимационный процесс, — теперь нужно при-
менить его к элементу. Анимация будет выполняться на целевых элементах h2, поэтому
создайте новое правило h2:target и поместите его под уже существующее (скоро вы
узнаете, почему его не нужно объединять с существующим правилом h2:target):
h2:target{
padding: 0;
background: none;
-webkit-animation-name: fade;
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in;
}

www.trk.kg