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

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

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

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

Использовалось краткое свойство

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

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

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

– точно так же, как мы проделали с текстовыми полями:

Благодаря анимации

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

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

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

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

Элементы форм редко бывают критическими элементами бренда, и поэтому формы – прекрасная область применения CSS3-свойств.

Элементы форм сильно отличаются внешне в зависимости от пользовательского окружения, но мы можем уменьшить эту разницу, оформляя их с помощью расширенного CSS и зная, что в браузерах, которые не поддерживают CSS3, будут отображаться прекрасно работающие, знакомые элементы форм по умолчанию.

Теперь спустимся на Землю и посмотрим назад.

Мы обсудили много прекрасных (если позволите мне так говорить) способов использования CSS3 прямо сейчас, в ежедневной работе. Я надеюсь, что, показав, как эти приемы могут улучшать взаимодействие в браузерах, которые поддерживают новые свойства, и как все остается рабочим в остальных браузерах, вы будете вдохновлены на то, чтобы использовать их ежедневно, вне зависимости от проекта.

Подлинный потенциал CSS3 – в том, что оно позволяет нам разрешать распространенные задачи дизайна более эффективно, используя меньше кода и получая решение с большей степенью гибкости. До тех пор пока вы (и ваши заказчики и руководители) признаете, что сайты могут выглядеть и проявлять себя по-разному в разных браузерах и на разных устройствах, возможностям не будет предела.