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

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

должительности перехода; значение по умолчанию равно нулю). Остальные свойства
необязательные.
Можно одновременно менять несколько свойств элемента; запишите детали каждого
перехода в одном общем свойстве transition, разделив их запятыми. В свойстве transition-
property также можно использовать ключевое слово all, указывающее, что переход должен
применяться ко всем свойствам элемента.

Не все свойства поддерживают переходы. Список свойств, с которыми можно исполь-
зовать эту функциональность, вы найдете на странице http://www.w3.org/TR/css3-
transitions/#animatable-properties. Все браузеры, поддерживающие переходы в целом,
также поддерживают переходы большей части перечисленных свойств. Есть определенные
исключения, но их перечисление заняло бы слишком много места.
Подробное описание синтаксиса переходов и примеры вы найдете на сайтах http://www.
webdesignerdepot.com/2010/01/css-transitions-101 и http://thinkvitamin.com/design/sexy-
interactions-with-css-transitions.
Помимо постепенного усиления яркости фонового цвета, свойство transition можно при-
менять для решения следующих задач:
• постепенный переход между состояниями кнопки, вкладки или ссылки «указатель
мыши наведен/фокус» и «указатель мыши не наведен/фокус»;
• подсветка или осветление изображений при наведении указателя мыши (постепенное
изменение значения непрозрачности);
• «растворение» изображений при смене наложенных друг на друга изображений (на-
пример, когда черно-белая версия заменяется цветной или версия «до» заменяется
версией «после»; см. http://trentwalton.com/2010/03/30/css3-transition-delay и http://
css3.bradshawenterprises.com);
• постепенное изменение цвета значков (на изображениях значков должны быть про-
зрачные области, сквозь которые виден фоновый цвет; переход применяется к фоно-
вому цвету страницы; см. http://www.ackernaut.com/tutorials/rocking-icons-with-css);
• постепенное отображение подсказок или информационных полей (см. http://www.
zurb.com/playground/drop-in-modals);
• создание «растущих» или «сжимающихся» элементов (переход применяется к значению
ширины, высоты или масштаба трансформации; см. http://www.zurb.com/playground/
css3-polaroids и http://www.marcofolio.net/css/animated_wicked_css3_3d_bar_chart.html);
• элементы, «вплывающие» в область просмотра (переход применяется к значению
ширины, высоты, позиции или к трансформации), например в галерее изображений,
в меню типа «аккордеон», на слайдере со специальным содержимым (см. http://www.
nealgrosskopf.com/tech/thread.php?pid=45, http://dev.opera.com/articles/view/css3-
show-and-hide, http://www.impressivewebs.com/animated-sprites-css3 и http://css3.
bradshawenterprises.com);
• создание движущегося фонового изображения (см. http://www.paulrhayes.com/2009-
04/auto-scrollingparallax-effect-without-javascript).

www.trk.kg