Книга css3 3е издание Серия Бестселлеры OReilly
 Скачать 20.28 Mb.
|
|
Краткая запись свойства animation Как видите, существует множество свойств анимации, и набор вручную всех этих свойств, да еще и со всеми версиями, включающими префиксы производителей, может привести к болевым ощущениям, вызванным кистевым туннельным син- дромом. Поскольку вам по-прежнему нужно пользоваться версиями с префиксами производителей, путь к упрощению ситуации лежит через применение краткой записи свойства animation . В одном этом свойстве сочетаются такие свойства, как animation-name , animation-duration , animation-timing-function , animation-iteration- count , animation-direction , animation-delay и animation-fill-mode . Можно, например, взять следующий код: .fade { animation-name: fadeOut; animation-duration: 2s; animation-timing-function: ease-in-out; animation-iteration-count: 2; animation-direction: alternate; animation-delay: 5s; animation-fill-mode: forwards; } и придать ему следующий вид: .fade { animation: fadeOut 2s ease-in-out 2 alternate 5s forwards; } Всего одна строка кода вместо семи! Значения свойств нужно перечислять в ранее упомянутом порядке: имя, продолжительность, функция распределения скорости по времени, количество раз, направление, задержка и режим заполнения. Кроме того, нужно поставить между значениями запятые. Обязательными являются только имя и продолжительность. Все остальные значения являются необязательными. Если к элементу нужно применить несколько анимаций, следует воспользо- ваться списком их свойств с применением запятой в качестве разделителя. На- пример, чтобы применить две анимации (скажем, fadeOut и glow ) к элементам, вы- бираемым стилем .fade , напишите следующий код: 378 Часть 2. Применение CSS .fade { animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; } Разумеется, при реальном использовании этого свойства нужны еще и версии с префиксами производителей: .fade { -webkit-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; -moz-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; -o-animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; } Выбырайте краткую форму записи, она намного лаконичнее и благосклоннее по отношению к вашим пальцам и клавиатуре. Приостановка анимации В CSS3 имеется еще одно свойство анимации — animation-play-state . Оно предна- значено для управления проигрыванием анимации. Этому свойству передается одно из двух ключевых слов — running или paused . Чтобы приостановить анимацию, нужно просто применить к стилю следующее объявление: animation-play-state: paused; Но фактически применить это свойство к CSS можно только с помощью псев- докласса. Как и в случае с переходами, для приостановки анимации нужен иници- атор. Один из вариантов предусматривает приостановку анимации при проходе над подвергающимся анимации элементом указателя мыши. В следующем приме- ре используется стиль для класса fade : .fade { animation: fadeOut 2s ease-in-out 2 alternate 5s forwards, glow 5s; } Этот код запускает две анимации — fadeOut и glow — для любого элемента, к ко- торому применен класс fade . Предположим, что нужно позволить посетителям при- останавливать данную анимацию при проводе над ней указателя мыши. Для этого нужно только добавить еще один стиль: .fade:hover { animation-play-state: paused; } Разумеется, вам понадобятся и все версии с префиксами производителей. Более эффективным способом приостановки анимации будет динамическое применение свойства animation-play-state к элементу с помощью JavaScript. Можно будет соз- Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS 379 дать сложную анимацию и добавить кнопку Пауза , по щелчку на которой анимация будет приостановлена. Дополнительные сведения о JavaScript и CSS-анимациях даны во врезке «Информация для опытных пользователей. Использование JavaScript для запуска переходов» в подразделе «Распределение скорости выполнения пере- хода по времени» раздела «Переходы». Анимация при проходе указателя мыши над элементом Все ранее показанные анимации запускаются при загрузках страницы. Но у вас есть еще несколько вариантов запуска CSS-анимации, включая несколько псевдоклассов и использование JavaScript. Чаще всего для анимации применяется псевдокласс :hover С помощью этого псевдокласса можно запустить анимацию при проходе указателя мыши посетителя над любым элементом, например можно придать логотипу элемент динамичности, заставляя его исчезать со страницы и появляться на ней снова. Чтобы применить анимацию к элементу при проходе над ним указателя мыши посетителя, нужно сначала создать анимацию с помощью правила @keyframes (шаг 1 в предыдущей последовательности действий). Затем для анимируемого элемента следует создать псевдокласс :hover . В стиле для этого псевдокласса просто добавляются свойства ани- мации (шаг 2 в предыдущей последовательности дей ствий). Теперь анимация запус- кается, только когда посетитель проводит указатель мыши над элементом. Обучающий урок В этом уроке к баннеру будут добавлены преобразования, анимация и переходы. Сначала нужно загрузить с сайта www.sawmac.com/css3 файлы урока. Перейдите по ссылке и загрузите ZIP-архив с файлами (подробное описание процесса разархивации файлов содержится на указанном сайте). Файлы этого урока содержатся в папке 10 1. Откройте в текстовом редакторе файл banner.html , который находится в ката- логе 10 Страница, находящаяся в этом файле, включает баннер с изображением лого- типа, заголовок и набор навигационных кнопок (рис. 10.9). Сначала будет до- бавлено преобразование, увеличивающее масштаб изображения кнопки при проходе над ней указателя мыши посетителя. Рис. 10.9. Обычный статический баннер, ожидающий оживления с помощью анимации, преобразований и переходов 2. Найдите открывающий и закрывающий теги |