HTML5 и CSS3. Разработка сайтов для любых браузеров и устройств. 2-е изд. - Фрэйн .

Сначала создадим правило @keyframes:

@keyframes pulse {

    100% {

        text-shadow: 0 0 5px #bbb;

        box-shadow: 0 0 3px 4px #bbb;

    }

}

Как видите, за написанием @keyframes для определения нового эт-правила keyframes следует имя конкретной анимации (в данном примере pulse).

Вообще-то лучше использовать имя, представляющее действие, производимое анимацией, а не место, к которому вы собираетесь ее применить, поскольку одно и то же правило @keyframes может использоваться по всему проекту необходимое количество раз.

Здесь мы использовали только один селектор ключевого кадра — 100%. Но в правиле keyframes таких селекторов можно указать сколько угодно, определив их в виде процентных отметок. Эти отметки нужно представлять себе находящимися на шкале времени. Например, на 10 % следует сделать фон синим, на 30 % — лиловым, а на 60 % элемент должен стать полупрозрачным и т. д., как вы сочтете нужным. Имеется также ключевое слово from, эквивалентное 0 %, и to, эквивалентное 100 %. Их можно использовать следующим образом:

@keyframes pulse {

    to {

        text-shadow: 0 0 5px #bbb;

        box-shadow: 0 0 3px 4px #bbb;

    }

}

Но следует иметь в виду, что браузеры, основанные на движке WebKit (iOS, Safari), не всегда понимают значения from и to, предпочитая им 0% и 100%, поэтому я рекомендую остановить свой выбор на процентном обозначении селекторов ключевых кадров.

Как вы заметили, мы не стали определять стартовое положение. Дело в том, что оно совпадает с тем состоянием, в котором уже находится каждое из этих свойств. Ту часть спецификации, в которой все это объясняется, можно найти по адресу http://www.w3.org/TR/css3-animations/.

примечание

Если не определен ключевой кадр для 0 % или from, то агент пользователя создает ключевой кадр для 0 %, используя вычисленные значения анимируемых свойств. Если не определен ключевой кадр для 100 % или to, то агент пользователя создает ключевой кадр для 100 %, используя вычисленные значения анимируемых свойств. Если в селекторе ключевого кадра указано отрицательное процентное значение или значение, превышающее 100 %, то ключевой кадр будет проигнорирован.

В эт-правиле keyframes мы добавили к селектору 100 % свойства text-shadow и box-shadow, после чего ожидаем, что ключевые кадры, будут применены к элементу для анимации text-shadow и box-shadow до определенной величины. Но сколько будет длиться анимация? Как заставить ее повториться, пойти вспять и продемонстрировать другие возможности, по поводу которых я надеюсь получить ответ? Вот как происходит применение анимации на основе ключевых кадров:

.flipper:hover .flipper-horizontal {

    transform: rotateY(180deg);

    animation: pulse 1s 1s infinite alternate both;

}

Здесь для краткой формы записи ряда связанных с анимацией свойств используется свойство animation. В данном примере объявляются (по порядку) имя используемого объявления ключевых кадров (pulse), продолжительность анимации (одна секунда), задержка перед началом анимации (одна секунда, чтобы дать нашей кнопке время на первый переворот), количество запусков анимации (бесконечно — infinite), направление анимации (чередование — alternate, то есть анимация сначала идет в одном направлении, а затем его меняет), а затем нам нужно, чтобы свойство animation-fill-mode сохраняло значения, определенные в ключевых кадрах, когда анимация собирается идти вперед или назад (both).

Сокращенная запись может фактически принять все семь свойств анимации. Вдобавок к тому что было использовано в предыдущем примере, можно указать значение свойства animation-play-state. Для эффективного проигрывания или остановки анимации ему может быть присвоено значение состояния работы — running или состояния на паузе — paused. Разумеется, использовать сокращенную запись совсем не обязательно, иногда имеет смысл установить каждое свойство по отдельности, что поможет разобраться в коде при его последующем изучении. Далее показаны отдельные свойства и там, где это возможно, их альтернативные значения, отделенные друг от друга вертикальной чертой:

.animation-properties {

    animation-name: warning;

    animation-duration: 1.5s;

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

    animation-iteration-count: infinite;

    animation-play-state: running | paused;

    animation-delay: 0s;

    animation-fill-mode: none | forwards | backwards | both;

    animation-direction: normal | reverse | alternate | alternate-reverse;

}

примечание

Полное определение каждого из этих свойств анимации можно найти по адресу http://www.w3.org/TR/css3-animations/.

Как уже упоминалось, объявленные ключевые кадры использовать в отношении других элементов и с совершенно другими установками довольно просто:

.flipper:hover .flipper-vertical {

    transform: rotateX(180deg);

    animation: pulse 2s 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) 5

    alternate both;

}

Здесь pulse-анимация запустится на две секунды и будет использовать функцию развития процесса по времени ease-in-out-back, определенную в виде кривой Безье третьего порядка. Анимация будет повторяться в обе стороны пять раз. Это объявление применено в файле примера к вертикально переворачиваемому элементу.

Это всего лишь один простой пример использования CSS-анимации. Так как на ключевые кадры можно разложить практически все, перед нами открываются, по сути, безграничные возможности. О последних разработках в области CSS3-анимации можно узнать по адресу http://dev.w3.org/csswg/css3-animations/.

Свойство animation-fill-mode property. Свойство animation-fill-mode заслуживает специального упоминания. Рассмотрим анимацию, начинающуюся с фона желтого цвета, который переходит в фон красного цвета за три секунды. Код этого примера можно увидеть в файле каталога example_08-08.

Здесь применяется следующая анимация:

.background-change {

    animation: fillBg 3s;

    height: 200px;

    width: 400px;

    border: 1px solid #ccc;

}

@keyframes fillBg {

    0% {

        background-color: yellow;

    }

    100% {

        background-color: red;

    }

}

Но как только анимация завершится, фон контейнера div вернется к бесцветному состоянию. Это потому, что по умолчанию все, что происходит за пределами анимации, остается за ее пределами! Чтобы изменить такое поведение, у нас есть свойство animation-fill-mode. В данном примере мы можем воспользоваться следующим кодом:

animation-fill-mode: forwards;

Тогда элемент сможет сохранить любые значения, примененные в конце анимации. В нашем случае в контейнере div сохранится фон красного цвета, которым заканчивается анимация. Дополнительные сведения о свойстве animation-fill-mode можно найти по адресу http://www.w3.org/TR/css3-animations/#animation-fill-mode-property.

Резюме

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

Из этой главы мы узнали, что такое CSS3-преобразования и как создается код для их реализации. Мы научились пользоваться функциями развития процесса по времени ease и linear, а затем применили их для создания простых, но весьма интересных эффектов. Затем было изучено все, что касается 2D-преобразований, в том числе масштабирование и наклон, после чего рассмотрены способы их использования в связке с переходами. Вкратце были рассмотрены 3D-преобразования, а затем изучено все, что касается эффективности и относительной простоты CSS-анимации. И трудно не согласиться с тем, что ваши возможности по части использования CSS3 существенно возросли!

Но есть одна область в разработке сайтов, которую я всеми силами стараюсь обойти стороной, — это создание форм. Не знаю почему, но мне всегда казалось, что их создание является весьма нудной и зачастую не приносящей полного удовлетворения работой. Представьте себе, как я обрадовался, когда узнал, что HTML5 и CSS3 могут как никогда ранее упростить процесс создания, стилевого оформления и даже проверки правильности заполнения форм. У меня появилось желание заняться этим вопросом. Подобный прилив энтузиазма в части создания веб-форм можете испытать и вы. Этими знаниями я готов поделиться с вами в следующей главе.

9. Обуздание форм с помощью HTML5 и CSS3

До появления HTML5 для добавления в формы таких компонентов, как панели выбора даты, замещаемый текст и ползунки диапазонов, всегда требовалось применение кода JavaScript. Кроме того, не было простого способа довести до пользователя, что именно ожидается вводить в конкретные поля ввода, например, хотим ли мы от пользователя ввода телефонных номеров, адресов электронной почты или URL-адресов. Теперь же мы можем порадоваться тому, что во многом эти задачи решаются средствами HTML5.

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