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

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

коротко о СвойСтве anImatIon
Свойство animation входит в модуль Animations (Анимация), который вы найдете по
адресу http://www.w3.org/TR/css3-animations. Это составное свойство включает свойства
animation-name, animation-duration, animation-timing-function, animation-delay, animation-
iteration-count и animation-direction (в указанном порядке).
Прежде чем связывать анимацию с элементом, используя перечисленные выше свойства,
нужно присвоить анимационному процессу имя и указать, что он будет делать, в свойстве
@keyframes. Ключевые кадры — это этапы анимационного процесса, определяемые про-
центными значениями; ключевые слова from и to соответствуют значениям 0% и 100%,
соответственно. Каждый ключевой кадр содержит правила стилей, действующие именно
на этом этапе анимации. Браузер постепенно меняет стили, переходя от одного ключевого
кадра к следующему.

Помимо растворения фонового цвета, свойство animation можно использовать для ре-
шения следующих задач:
• создание кнопок с пульсирующим сиянием (см. http://www.zurb.com/playground/
radioactive-buttons);
• вращающиеся индикаторы загрузки (см. http://24ways.org/2009/css-animations);
• информационные карточки (см. http://line25.com/articles/super-cool-css-flip-effect-with-
webkit-animation);
• элементы, въезжающие в область просмотра (см. http://www.zurb.com/playground/
sliding-vinyl).
В Сети можно найти массу более сложных, «киношных» эффектов, созданных с помощью
возможностей анимации CSS, однако я постаралась ограничиться наиболее практичными
примерами. И все же очень интересно бывает посмотреть, на что способна анимация CSS. Вы-
полните в Google запрос «CSS3 animation», чтобы получить приблизительное представление.

Таблица 5.6. Поддержка свойства animation в браузерах

IE Firefox Opera Safari Chrome
Нет Нет Нет Да, с префиксом -webkit- Да, с префиксом -webkit-

Вместо того чтобы задерживать начало анимации с помощью свойства animation-
delay, можно добавить эту задержку в саму анимацию, вставив дополнительный
ключевой кадр с не меняющимся голубым цветом:
@-webkit-keyframes fade {
0% {background: hsla(203,78%,36%,.2);}
20% {background: hsla(203,78%,36%,.2);}
100% {background: none;}
}

www.trk.kg