Книга css3 3е издание Серия Бестселлеры OReilly

• Название: Книга css3 3е издание Серия Бестселлеры OReilly
• Анкор: TheBigBookofCSS33rdedition.pdf
• Дата: 08.08.2018
• Размер: 20.28 Mb.
• Имя файла: TheBigBookofCSS33rdedition.pdf
• Тип: Книга; #22630
• страница: 38 из 62

369
to {
background-color: red;
}
}
В данном случае синий фон появится в середине анимации. Если нужно, чтобы желтый цвет присутствовал в фоне дольше, а синим становился после трех четвертей времени анимации, используйте не 50%, а 75 %. Таким же образом можно продолжать добавлять дополнительные ключевые кадры (например, на 25, 66 % и т. д.).
ПРИМЕЧАНИЕ
Ключевое слово from можно заменить значением 0 %, а ключевое слово to — значением 100 %.
Но одним свойством CSS можно не ограничиваться. Внутри ключевого кадра может находиться любое количество пригодных к анимации свойств — background- color
, opacity
, width
, height и т. д.:
@keyframes growAndGlow {
from {
background-color: yellow;
}
50% {
transform: scale(1.5);
background-color: blue;
}
to {
transform: scale(3);
background-color: red;
}
}
В этом примере наряду с троекратным изменением цвета фона происходит уве- личение масштаба элемента, размеры которого в итоге становятся втрое больше первоначальных.
Можно также усложнить использование процентных значений, добавив не- сколько таких значений к одному набору CSS-свойств. Это может пригодиться в нескольких случаях: при необходимости довести анимацию до некоторого мо- мента, сделать паузу, а затем продолжить анимацию. Предположим, например, что вам нужно, чтобы сначала у содержимого тега

был желтый цвет фона. Затем нужно, чтобы цвет сменился на синий, некоторое время оставался синим, а затем сменился на красный. То есть нужна пауза в середине анимации, при которой цвет не менялся, а затем необходима новая смена цвета. Эта задача решается с помо- щью следующего кода:
@keyframes glow {
from {
background-color: yellow;
}

370
Часть 2. Применение CSS
25%, 75% {
background-color: blue;
}
to {
background-color: red;
}
}
Обратите внимание на процентные значения
25%, 75%
в строке 5. Они означают, что на 25 % от всего хода анимации фоновый цвет элемента станет синим. Но он будет оставаться синим до 75 %, то есть 25 % от всего хода анимации. От отметки 25 % до отметки 75 % фон будет сохранять чисто-синий цвет, перед тем как к окончанию ани- мации превратиться в красный. Если продолжительность этой анимации будет 4 се- кунды, то в средние 2-й секунды фон элемента будет иметь чисто-синий цвет.
Процентное значение можно также использовать при необходимости примене- ния одного и того же набора CSS-свойств для различных частей анимации. Пред- положим, например, что нужно провести еще одну анимацию фонового цвета, но на этот раз менять цвет от желтого к синему, затем к оранжевому, после чего к си- нему, к оранжевому и к красному. Синий и оранжевый цвета фигурируют в этом перечне дважды, поэтому вместо многократного упоминания об этих свойствах фонового цвета можно воспользоваться следующим кодом:
@keyframes glow {
from {
background-color: yellow;
}
20%, 60% {
background-color: blue;
}
40%, 80% {
background-color: orange;
}
to {
background-color: red;
}
}
В данном случае фоновый цвет превратится в синий на отметке 20 %, в оранже- вый — на отметке 40 %, затем опять в синий на отметке 60 %, и перед тем как стать в конце анимации красным, он еще один последний раз на отметке 80 % превратит- ся в оранжевый.
Один из недостатков анимации CSS3 состоит в том, что ей требуются префик- сы производителей (как и большинству других свойств CSS3). То есть вам нужно повторить определения ключевых кадров для каждого браузера. Поэтому для за-

Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS
371
пуска следующей анимации постепенного появления элемента на как можно боль- шем количестве браузеров, придется написать следующий код:
@-webkit-keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-moz-keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@-o-keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeIn{
from {
opacity: 0;
}
to {
opacity: 1;
}
}
Обратите внимание на два дефиса: один между символом
@
и префиксом про- изводителя и второй между префиксом производителя и словом keyframes
ПРИМЕЧАНИЕ
Префикс производителя -ms- для Internet Explorer в данном случае не нужен. Internet Explorer 9 и бо- лее ранние версии анимацию совсем не воспринимают, а Internet Explorer 10 поддерживает синтак- сис @keyframes без префикса.

372
Часть 2. Применение CSS
Применение анимации
Когда определение набора ключевых кадров будет завершено, анимация будет готова к применению, и, чтобы заставить ее работать, ее нужно применить к какому-нибудь элементу страницы. Анимацию можно добавить к любому стилю любого элемента страницы. Если просто добавить анимацию к стилю, который тут же применяется к эле- менту, например к стилю тега h1
, анимация будет применена при загрузке страницы.
Этот прием можно использовать для добавления на страницу вводной анимации, ко- торая увеличивает масштаб логотипа, помещая его в верхний левый угол страницы, или создает свечение конкретного блока информации, привлекая к нему внимание.
Кроме того, анимацию можно применить к одному из псевдоклассов, включая
:hover
,
:active
,
:target или
:focus
, чтобы, например, запустить анимацию при про- ходе указателя мыши посетителя над ссылкой или при щелчке на поле формы.
И наконец, анимацию можно применить к стилю класса, и воспользоваться кодом
JavaScript для динамического применения этого класса в ответ на щелчок посети- теля на кнопке или на каком-нибудь другом элементе страницы.
В CSS3 предоставляется несколько свойств, связанных с анимацией и позво- ляющих управлять способом и временем проигрывания анимации (а также со- кращенная версия, охватывающая все отдельные свойства). Как минимум, чтобы заставить анимацию выполняться, нужно указать имя, которое было дано исход- ной анимации (в правиле
@keyframes
), и продолжительность анимации.
Рассмотрим простой пример. Предположим, нужно, чтобы при загрузке стра- ницы в поле зрения появился div
-контейнер с важным объявлением. Этому div
- контейнеру был назначен класс с именем announcement
:
-

.
1. Создайте анимацию постепенного появления, задав правило
@keyframes
:
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
СОВЕТ
Ели анимируется всего лишь одно свойство, то его будет проще прочитать, если поместить весь ключевой кадр в одной строке:
from { opacity: 0; }
Но если анимируется множество свойств, то читать (и набирать) проще будет при распределении кода по нескольким отдельным строкам:
from {
opacity: 0;
color: red;
width: 50%;
}
2. Примените эту анимацию к стилю, предназначенному для тега

:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
}

Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS
373
Свойство animation-name просто сообщает браузеру, какую анимацию нужно применить. Ему указывается то самое имя, которое предоставлялось анимации при выполнении шага 1. Свойство animation-duration устанавливает время, ко- торое займет анимация от старта до финиша. В данном примере перечисляются только два свойства анимации, но вы можете (и, наверное, захотите) поместить в стиль и другие, не связанные с анимацией свойства. Например, в реальности к нашему стилю
.announcement будут, наверное, добавлены такие свойства, как width
, background-color
, border и т. д.
ПРИМЕЧАНИЕ
С технической точки зрения помещать имя анимации в кавычки ('fadeIn') не требуется, и в этом примере так не делается, но помещение в кавычки поможет избежать конфликтов, возникающих при использовании в качестве имени анимации какого-нибудь ключевого слова CSS.
Как и в случае использования правила
@keyframes
, каждое из свойств анимации требует префиксов, определяющих производителя, поэтому показанный выше стиль
.announcement для работы на как можно большем количестве браузеров нуж- но переписать следующим образом:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
-webkit-animation-name: fadeIn;
-webkit-animation-duration: 1s;
-moz-animation-name: fadeIn;
-moz-animation-duration: 1s;
-o-animation-name: fadeIn;
-o-animation-duration: 1s;
animation-name: fadeIn;
animation-duration: 1s;
}
Возможно, покажется несколько неудобным определять анимацию с помощью правила
@keyframes в одном месте, а затем применять ее в другом месте (в стиле), но после задания анимация может применяться несколько раз в любом количестве стилей. Например, можно создать общий тип анимации появления элемента на экране и применить этот тип к различным элементам. Более того, можно управлять анимацией для каждого стиля совершенно независимо, например заставить заго- ловок появляться в течение половины секунды, а другие элементы страницы — в течение 5 секунд.
Кроме того, к одному и тому же элементу можно применить более одной анима- ции. Предположим, что вы создаете одну анимацию с именем fadeIn
, чтобы аними- ровать появление элемента, и еще одну анимацию с именем blink
, чтобы получить мигающий цвет фона. Чтобы применить к элементу обе анимации, нужно указать список имен с запятой в качестве разделителя:
animation-name: fadeIn, blink;
Чтобы задать этим анимациям разные параметры времени, нужно указать спи- сок этих параметров с запятой в качестве разделителя:

374
Часть 2. Применение CSS
animation-name: fadeIn, blink;
animation-duration: 1s, 3s;
Порядок применения параметров времени совпадает с порядком указания имен анимаций. Например, первая анимация получает время, указанное в списке пер- вым. В показанном выше примере продолжительность fadeIn составляет 1 секунду, а продолжительность blink
— 3 секунды.
Можно также применить некоторые другие полезные свойства анимации, рас- сматриваемые далее.
Распределение скорости выполнения анимации по времени
Как показано ранее, свойство animation-duration позволяет управлять продолжи- тельностью анимации. Как и в случае с переходами (transitions), для задания про- должительности можно использовать миллисекунды (например,
750ms
) или секун- ды (например,
.75s
).
Как и в случае с переходами, можно указывать функцию распределения скорости анимации по времени, которая управляет этой скоростью на заданном времени про- должительности анимации. Например, анимацию можно начинать медленно и завер- шать быстро, используя для этого кубическую кривую Безье или одно из встроенных ключевых слов, определяющих метод: linear
, ease
, ease-in
, ease-out
, ease-in-out
. Все это работает точно так же, как и в ранее рассмотренном случае с переходами.
Свойство animation-timing-function можно использовать для управления всей ани- мацией или только для конкретных ключевых кадров. Например, чтобы применить функцию ease-out для представленной ранее анимации fadeIn
(шаг 1 в предыдущей последовательности действий), добавьте функцию распределения скорости по вре- мени к стилю
.announcement
(шаг 2 в предыдущей последовательности действий):
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-timing-function: ease-out;
}
Но можно также управлять функцией распределения скорости по времени меж- ду ключевыми кадрами. Предположим, например, что создается анимация с тремя ключевыми кадрами и с тремя различными цветами фона. Веб-браузер будет осу- ществлять анимацию при превращении одного цвета в другой, а затем в третий. Воз- можно, вам захочется замедлить превращение первого цвета во второй с помощью кубической кривой Безье, а затем равномерно продолжить анимацию от середины до ее окончания. Это можно сделать путем добавления двух функций распределения скорости по времени, одной для первого ключевого кадра (она будет управлять ани- мацией от ключевого кадра 1 к ключевому кадру 2), и второй — для второго ключе- вого кадра для управления анимацией от второго ключевого кадра к третьему:
@keyframes growAndGlow {
from {
background-color: yellow;
animation-timing-function: cubic-bezier(1, .03, 1, .115);
}
50% {

Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS
375
transform: scale(1.5);
background-color: blue;
animation-timing-function: linear;
}
to {
transform: scale(3);
background-color: red;
}
}
С помощью соответствующего свойства можно задержать начало анимации. Это свойство работает точно так же, как и свойство transition-delay
, использующееся для переходов, и просто задает до начала анимации период ожидания на указанное количество миллисекунд или секунд. Например, если нужно подождать 1 секунду, прежде чем запустить постепенное появление на экране div
-контейнера с классом announcement
, можно переписать стиль
.announcement следующим образом:
.announcement {
animation-name: fadeIn;
animation-duration: 1s;
animation-delay: 1s;
}
Добавление задержки к анимации является неплохим способом привлечения внимания и добавления элемента неожиданности странице.
ПРИМЕЧАНИЕ
Свойства animation-timing-function и animation-delay требуют префиксов производителей, поэтому не забудьте добавить к своим анимируемым стилям соответствующие префиксы, чтобы получить
-webkit-animation-timing-function, -moz-animation-timing-function и т. д.
Завершение анимации
С помощью CSS можно контролировать еще несколько аспектов анимации, включая ее повторение, направление ее выполнения, если она выполняется более одного раза, а также порядка форматирования браузером элемента по завершении анимации.
Переходы являются анимациями, выполняемыми однократно, например ука- затель мыши проходит над кнопкой и она увеличивается в размерах. А вот анима- ции благодаря свойству animation-iteration-count могут запускаться один, два и более раза или непрерывно. Если нужно запустить анимацию 10 раз (возможно, в виде десятикратного появления и исчезновения элемента), добавьте к анимиру- емому стилю следующий код:
animation-iteration-count: 10;
Обычно браузеры проигрывают анимацию только один раз, и если это все, что вам нужно, то свойство подсчета итераций можно оставить в покое. Если же необ- ходимо, чтобы анимация повторялась непрерывно, для этого свойству animation- iteration-count передается одно ключевое слово: infinite
. Следовательно, для за- пуска анимации fadeIn для div
-контейнера с классом announcement бесконечное количество раз, можно создать следующий стиль:

376
Часть 2. Применение CSS
.announcement {
animation-name: fadeIn;
animation-duration: .25s;
animation-iteration-count: infinite;
}
Но такое решение, несомненно, утомит ваших пользователей, поэтому лучше от этого отказаться. Тем не менее подобным стилем можно воспользоваться для про- стого «пульсирующего» эффекта, при котором вызывается мягкое свечение кнопки
Подпишитесь сегодня
(путем анимации ранее рассмотренного свойства box-shadow
).
Обычно при многократном запуске анимации веб-браузер запускает анимацию буквально с самого начала. Поэтому, если анимируется превращение желтого фо- нового цвета в синий и это повторяется дважды, браузер покажет, как желтый блок превращается в синий, а затем внезапно вернется желтый блок, который превра- тится в синий еще раз. Этот эффект может слишком сильно резать глаз. Эффект будет выглядеть лучше, если через некоторое время после анимации браузер про- сто воспроизведет эффект в обратном порядке. Именно так работают переходы: например, когда указатель мыши проходит над элементом, браузер анимирует пе- реход из обычного состояния к состоянию, заданному при проходе над элементом.
Когда указатель мыши выходит за пределы элемента, браузер просто воспроизво- дит анимацию в обратном порядке, возвращая внешний вид элемента в обычное состояние. Чтобы анимация при нечетных проигрываниях шла в прямом, а при нечетных — в обратном порядке, используется свойство animation-direction и клю- чевое слово alternate
. Например, чтобы элемент постепенно исчезал, а затем снова появлялся, можно создать анимацию fadeOut
:
@keyframes fadeOut {
from { opacity: 1; }
to { opacity: 0; }
}
А затем можно воспроизвести эту анимацию дважды, меняя при втором воспро- изведении ее направление на противоположное:
.fade {
animation-name: fadeOut;
animation-duration: 2s;
animation-iteration-count: 2;
animation-direction: alternate;
}
Этот код заставляет веб-браузер запустить анимацию fadeOut в отношении любо- го элемента, имеющего класс fade
. Анимация должна продолжаться 2 секунды, а затем повторяться. Поскольку свойство animation-direction имеет значение alternate
, ани- мация в первый раз приведет к исчезновению элемента (его свойство непрозрачнос- ти от полностью непрозрачного (значение opacity равно
1
) постепенно поменяется на
0
— полностью прозрачное), а затем при втором проигрывании все пойдет вспять
(значение opacity будет изменяться от
0
до
1
) и элемент снова появится на экране.
СОВЕТ
Чтобы анимация воспроизводилась несколько раз, но в конечном итоге возвращала элементу его первоначальный вид, используйте четное количество итераций и установите для свойства animation- direction значение alternate.

Глава 10. Осуществление преобразований, переходов и анимации с помощью CSS
377
Неважно, сколько раз вы заставите браузер воспроизводить анимацию, но как только она завершится, браузер отобразит элемент в его первоначальном виде. Пред- положим, например, что изображение анимируется таким образом, чтобы его размер медленно увеличивался до достижения двойного размера. Как только анимация будет завершена, веб-браузер тут же вернет изображению его первоначальный раз- мер, создавая слишком резкий визуальный эффект. К счастью, браузер можно заста- вить сохранить элементу тот вид, который у него был по завершении анимации.
Для этого нужно установить для свойства animation-fill-mode значение forwards animation-fill-mode: forwards;
Это свойство применяется к анимируемому элементу вместе с такими свой- ствами, как animation-name
, animation-duration,
и другими свойствами, имеющими отношение к анимации.