CSS3 для веб-дизайнеров

-webkit-box-shadow: 0 0 12px rgba(51, 204, 255, 0.2);

}

}

Здесь задаются свойства только для WebKit – с помощью браузерного префикса. На протяжении всей книги мы аккуратно копировали свойства для всех браузеров и писали беспрефиксную версию. Но в этом случае, когда CSS-анимации поддерживаются лишь в Safari и Chrome и другие производители браузеров еще не определились, стоит ли вообще относить анимации к CSS, я предпочитаю писать правила только для -webkit-.

Ссылки на keyframe

Вторая часть CSS-анимации заключается в том, чтобы сослаться на keyframe по его имени, пользуясь свойством animation.

В этом случае мы хотим, чтобы пульсация box-shadow

начиналась тогда, когда пользователь переводит фокус на текстовое поле в форме. В этот момент мы можем обратиться к keyframe по его имени, задать длительность анимации, зациклить ее и определить временные функции перехода. Можно видеть, что синтаксис анимаций похож на синтаксис переходов.

#thing-alerts input[type=»text»]: focus {

-webkit-animation: pulse 1.5s infinite ease-in-out;

}

Таким образом мы обеспечиваем, чтобы анимация пульсирования запускалась только тогда, когда пользователь наводит фокус на текстовое поле формы.

Результат довольно впечатляющий. Если бы технология позволяла мне показать его на листе бумаги, я бы сделал это. Вместо этого рис. 6.17 должен передать ощущение того, что происходит: медленное анимированное затухание и появление box-shadow

, как будто бы поле ввода ждет, когда с ним начнут взаимодействовать.

^{Рис. 6.17. Если быстро перемещать глаза вверх и вниз по этой картинке, можно получить ощущение той анимации, которую мы добавили к полям ввода в состоянии: focus}

Использовалось краткое свойство animation, чтобы задать значения для обращения к анимации в одном месте. Вместо этого можно задавать каждое значение в отдельном свойстве:

#thing-alerts input[type="text"]: focus {

-webkit-animation-name: pulse;

-webkit-animation-duration: 1.5s;

-webkit-animation-iteration-count: infinite;

-webkit-animation-timing-function: ease-in-out;

}

Повторное использование анимации для кнопки в состоянии hover

Одна из приятных особенностей ключевых кадров состоит в том, что их можно повторно использовать внутри нескольких блоков кода в стилевом листе. Например, применить ту же анимацию «pulse» к кнопке в состояниях hover и focus, добавляя Wii-подобное пульсирующее синее свечение.

Это очень просто: к кнопке в состояниях hover и focus добавляется то же самое свойство animation – точно так же, как мы проделали с текстовыми полями:

#thing-alerts input[type="submit"]: hover,

#thing-alerts input[type="submit"]: focus {

-webkit-animation: pulse 1.5s infinite ease-in-out;

}

Благодаря анимации pulse, которую мы ранее создали для текстовых полей, синяя тень (box-shadow) появляется и затухает. Мы можем заново использовать эту анимацию для кнопки, на которой этот эффект также работает хорошо (рис. 6.18), мягко мерцая, когда на нее наводят курсор или переводят фокус, – будто бы ожидая, пока пользователь нажмет на нее.

^{Рис. 6.18. Попытка проиллюстрировать пульсацию тени вокруг кнопки, когда на нее наведен курсор}

А как насчет остальных браузеров?

Добавление CSS-анимации – это первый раз в этой книге – когда мы улучшали пользовательский опыт только для одного производителя браузеров: WebKit. Одна из основных причин, по которой CSS3 используется все больше и больше, – новые свойства принимаются браузерами Firefox, Opera и IE9. Вы можете задаваться вопросом, стоит ли добавлять CSS-анимации на сегодняшний день. Это определенно то, что стоит рассматривать.