Анимация с помощью CSS3

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

Анимации шире реализованы, чем 3D-трансформации. Они поддерживаются в Firefox версии 5 и выше, Chrome, Safari версии 4 и выше, Android (всех версий), iOS (всех версий), кроме того, их поддержка должна быть внедрена в Internet Explorer 10.

CSS3-анимация состоит из двух компонентов: сначала идет объявление @keyframes, которое затем используется в свойстве animation. Взглянем на них.

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

Сначала напишем правило @keyframes:

@keyframes warning {

0% {

Text-shadow: 0px 0px 4px #000000;

}

50% {

Text-shadow: 0 0 20px #000000;

}

100% {

Text-shadow: 0px 0px 4px #000000;

}

Здесь я использую версию кода без префиксов, поэтому, если не будет наблюдаться никакого эффекта, то вам, вероятно, потребуется добавить полный набор вариантов с префиксами поставщиков (среди которых, например, будет @-webkit-keyframes).

Проанализируем код:

@keyframes warning {

0% {

Text-shadow: 0px 0px 4px #000000;

}

50% {

Text-shadow: 0 0 20px #000000;

}

100% {

Text-shadow: 0px 0px 4px #000000;

}

}

Сначала мы указываем объявление @keyframes. Затем мы присваиваем ему имя warning в данном случае. Вы можете присваивать объявлениям @keyframes любые имена по своему усмотрению, однако, поскольку эти объявления могут быть повторно использованы в отношении разных элементов, им следует присваивать соответствующие имена.

Вы можете задать столько процентных пунктов, сколько захотите (например, 10, 20, 30, 40 и т. д.), либо, если вас это больше устроит, определить анимацию с помощью значений from и to. Однако имейте в виду, что браузеры на основе Web-Kit не всегда хорошо работают с этими значениями (предпочитая 0% и 100%):

@keyframes warning {from {

Text-shadow: 0px 0px 4px #000000;

}

50% {

Text-shadow: 0 0 40px #000000;

}

To {

Text-shadow: 0 0 4px #000000;

}

}

В данном примере я изменяю text-shadow, начиная с одного и того же значения радиуса размытия и заканчивая им же. Это значение равно 4px, но превращается в 40px при 50%.

Теперь, объявив @keyframes, мы можем ссылаться на него в свойстве animation:

.back h5 {

Font-size: 4em; color: #f2050b; text-align: center;

Animation: warning 1.5s infinite ease-in;

Указав свойство animation, мы определяем конкретное правило @keyframes, которое желаем использовать (warning в данном случае), после чего задаем значение для animation-iteration-count (здесь мы устанавливаем значение infinite, из-за чего анимация будет выполняться непрерывно) и, наконец, вводим временную функцию (ease-in). Ясно, что статичное изображение не позволит наглядно передать весь эффект, но, надеюсь, вы сможете представить себе, как отбрасываемая текстом тень пульсирует. Чтобы увидеть эффект вживую, откройте браузер и зайдите на сайт http://www.andthewinnerisnt.com (рисунок 7.15).

Текст на обратной стороне постера теперь пульсирует красным цветом.

Собирательное свойство может включать в себя все семь анимационных свойств. В дополнение к тем, что мы указали в примере выше, можно указать animation-delay (например, если вам необходимо, чтобы выполнение анимации начиналось с задержкой), animation-play-state (для него можно задать значение running либо paused, чтобы воспроизводить и ставить анимацию на паузу соответственно) и, наконец, animation-fill-mode, с необходимостью применения которого я в своей практике еще не сталкивался (по умолчанию для него устанавливается значение none).

Естественно, вы не обязаны использовать собирательное свойство, а можете указать все свойства по отдельности, как показано далее:

Animation-name: warning; animation-duration: 1.5s; animation-timing-function: ease-in-out; animation-iteration-count: infinite; animation-play-state: running; animation-delay: 0s; animation-fill-mode: none;

Как уже отмечалось, анимации можно повторно использовать для других элементов. Например:

Nav ul li a: hover {

Animation: warning 1.5s infinite ease-in;

}

Этот код обеспечит аналогичный пульсирующий эффект для наших навигационных ссылок. Я надеюсь, вы заметили ссылку STILLS/PHOTOS На рисунке 7.16 среди всех этих анимаций. Зайдите на сайт http://www.andthewinnerisnt.com и попробуйте навести на нее указатель мыши.

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

При наведении на ссылку указателя она начинает пульсировать

Что угодно, то открывающиеся возможности поистине безграничны. В Интернете представлено бесчисленное множество примеров использования анимационных методик CSS3. Страницы вроде расположенной по адресу http://webdesignerwall.com/ trends/47-amazing-css3-animation-demos наверняка вдохновят вас на создание таких анимаций.

ПРИМЕЧАНИЕ.

Ознакомиться с новейшими разработками W3C в области CSS3-анимаций можно по адресу http://dev. w3.org/csswg/css3-animations.

Сведение воедино CSS3-трансформаций и анимаций. Попробуем сделать еще одну вещь, чтобы поиграть нашими «CSS3-мускулами». Я хотел бы попытаться разместить все располагающиеся во врезке <aside> изображения под разными углами, а затем анимировать их. Цель состоит в том, чтобы они «раскачивались» из стороны в сторону при первом посещении нашей веб-страницы. Вот разметка для врезки:

<aside>

<div role="complementary">

<div class="sideBlock unSung">

<h1>Unsung heroes…</h1>

<a href="#"><img src="img/midnightRun. jpg" alt="Midnight Run" /></a>

<a href="#"><img src="img/wyattEarp. jpg" alt="Wyatt Earp" /></a>

</div>

</div>

<div role="complementary">

<div class="sideBlock overHyped">

<h1>Overhyped nonsense…</h1>

<a href="#"><img src="img/moulinRouge. jpg" alt="Moulin Rouge" /></a>

<a href="#"><img src="img/kingKong. jpg" alt="King Kong" /></a>

</div>

</div>

</aside>

Теперь создадим CSS3-код, чтобы обеспечить нужный эффект. Сначала напишем новое объявление @keyframe с именем swing:

@-webkit-keyframes swing {from {

Transform: rotate (3deg);

}

20% {

Transform: rotate (7deg);

}

60% {

Transform: rotate (10deg);

80% {

Transform: rotate (7deg);

}

To {

Transform: rotate (3deg);

}

}

В нашей анимации будет использоваться 2D-трансформация rotate для поворота элементов на величину от 3 до 10° в разные стороны. А вот как мы добавим свойство animation:

#quiz. unSung a: nth-child (odd) img {transform: rotate (3deg); animation: swing 0.1s 5 ease-in;

}

#quiz. unSung a: nth-child (even) img {transform: rotate (-3deg); animation: swing 0.1s 5 0.3s ease-in;

}

#quiz. overHyped a: nth-child (odd) img {transform: rotate (3deg); animation: swing 0.1s 5 0.2s ease-in;

}

#quiz. overHyped a: nth-child (even) img {transform: rotate (-3deg); animation: swing 0.1s 5 0.5s ease-in;

}

Проанализируем приведенный выше код. Сначала, исходя из специфики CSS, мы можем нацелить эти правила исключительно на страницу с викториной (в которой имеется тег <body id="quiz">).

Перед добавлением свойства animation я хочу задать трансформацию rotate, которая будет использоваться по умолчанию, чтобы изображения «застыли» в беспорядочном состоянии, когда анимация завершится. Мне не нужно, чтобы все они располагались под одним углом, поэтому используем селектор nth-child, о котором мы говорили в главе 5, для выбора четных и нечетных изображений и обеспечим их поворот под разными углами:

#quiz. unSung a: nth-child (odd) img {transform: rotate (3deg);

Animation: swing 0.1s 5 ease-in;

}

#quiz. unSung a: nth-child (even) img {transform: rotate (-3deg);

Animation: swing 0.1s 5 0.3s ease-in;

}

#quiz. overHyped a: nth-child (odd) img {transform: rotate (3deg);

Animation: swing 0.1s 5 0.2s ease-in;

}

#quiz. overHyped a: nth-child (even) img {

Transform: rotate (-3deg);

Animation: swing 0.1s 5 0.5s ease-in;

}

Затем мы добавим свойство animation для каждого экземпляра. Вы заметите небольшие различия в каждом из правил. Собирательное свойство также учитывает, что второе указанное значение времени (0.5s) — это величина задержки начала выполнения анимации. Используя его, мы фактически можем по отдельности запускать выполнение анимации для каждого изображения.

#quiz. overHyped a: nth-child (even) img {transform: rotate (-3deg); animation: swing 0.1s 5 0.5s ease-in;

}

Опять-таки, когда пишешь об анимациях, трудно передать то, как будет выглядеть соответствующий эффект вживую. Если вы не находитесь поблизости от места, где можно подключиться к Интернету, то лучшее, что я могу сделать для описания получившегося эффекта, — сказать, что постеры фильмов «раскачиваются» из стороны в сторону, а затем «застывают» в беспорядочном состоянии, как показано На рисунке 7.17.

На рисунке сложно увидеть анимацию, но она есть!

Резюме..

Рассказу о возможностях CSS-трансформаций, переходов и анимаций можно посвятить множество книг. Однако я надеюсь, что благодаря приведенному в этой главе материалу вы сможете разобраться в основах и использовать их в своей работе. В конечном счете применение новых свойств и методик CSS3 преследует цель сделать адаптивные веб-дизайны еще более легковесными и насыщенными, чем когда-либо прежде, вместо того, чтобы использовать JavaScript для внесения любительских эстетических улучшений. В этой главе мы выяснили, что такое CSS3-переходы и как их создавать, разобрались в таких функциях, как ease и linear, которые затем использовали для создания простых, но занятных эффектов для нашего адаптивного веб-дизайна. После этого мы поговорили обо всех 2D-транс-формациях, например о scale и skew, а затем о том, как их использовать совместно с переходами. Кроме того, мы кратко взглянули на 3D-трансформации, прежде чем узнать всю мощь и относительную простоту CSS-анимаций. Безусловно, наши «CSS3-мускулы» растут!

Однако если и есть в дизайне сайтов область, которую я всегда по возможности стараюсь обходить стороной (так же упорно, как я стараюсь обходить стороной фильмы «Мюнхен» и «Кинг-Конг», когда идет их показ), то это создание форм. Не знаю почему, но я всегда считал это утомительной и сложной задачей. Представьте мою радость, когда я узнал, что HTML5 и CSS3 делают весь процесс создания, стилизации и даже валидации (да, валидации!) форм проще, чем когда-либо прежде. Я был просто счастлив. А значит, эта новость может столь же обрадовать и вас. В следующей главе я поделюсь с вами соответствующими знаниями.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *