Совершенствуйте сайты с помощью CSS3-анимации

CSS3-анимация

От автора: модулю CSS ‘Animations’ от консорциума W3C не сразу удалось завоевать популярность. При своей ограниченной поддержке браузерами не утверждаю, что он является одним из самых широко используемых свойств CSS3. Он сто лет доступен в браузерах, основанных на Webkit – в Chrome’е начиная со второй версии и в Safari с версии 4, но не имеет поддержки в Opera, IE и Firefox…до сих пор. Недавно, впрочем, вышел Firefox 5, а вместе с ним появилась и поддержка модуля анимации. Поговаривают, что следующим будет Opera. Когда глобальная поддержка свойства оценивается уже примерно в 25%, самое время немного с ним поразвлечься!

CSS3-анимация

скачать исходникидемо

Примечание: смотреть нужно в Firefox’е, Safari или Chrome’е.

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

Что такое CSS3 Animations?

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

Пример: Базовая анимация ключевых кадров

На примере внизу можно увидеть, что мы определили три различных состояния элемента, принимаемых на разных стадиях анимации. Мы назначили ему идентификатор ‘colours’.

/* Определение основной анимации */
@keyframes colours {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}
 
/* Активация анимации */
body {
    animation-name: colours;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-duration: 10s;
}

Примечание: в рабочем проекте W3C идентификатор анимации содержится в одинарных кавычках. Похоже, что Firefox’у это не нравится, и он работает только с кавычками. Webkit работает как с кавычками, так и с их отсутствием.

Все, что нужно сделать для запуска анимации – это применить к анимируемому элементу стиль CSS animation-name. В этом примере мы применили к элементу анимацию ‘colours’. Таким образом мы заставим фон своей веб-страницы медленно менять цвет от красного к зеленому и синему. Анимация идет в комплекте с рядом установок по умолчанию и для их отмены мы установили animation-timing-function (стиль перехода – например, ease-in или смотрите пользовательские кубические кривые функции назначения времени Безье (Bezier)), animation-iteration-count (количество раз повторения) и animation-duration (продолжительность анимации).

Стили анимации можно, кроме того, записать стенографией, применяя только animation, за которой следует список свойств. Для получения более полного пояснения различных свойств анимации CSS3 смотрите проект W3C.

Примечание: приведенный выше пример не будет работать, если вы просто скопируете и вставите стили. Анимация CSS3 требует префиксов для браузеров. Эти извлечения из примера были сделаны просто для ясности. –webkit – следует разместить перед стилями Chrome/Safari, а –moz – должен стоять перед стилями Firefox. Это слегка раздражает, так как означает, что анимацию нужно, по существу, определять дважды (или трижды, если вы желаете предусмотреть не подверженную устареванию в будущем версию без каких-либо префиксов).

Ныряем, очертя голову…

Madmanimation от Энди Кларка (Andy Clark) сотоварищи – фантастический пример того, насколько продвинуто может применяться анимация CSS3 при создании настоящего маленького фильма. Если взять наиболее общее представление, она, в основном, работает путем присвоения каждой анимации к элементу с классом .go, добавленным к селектору CSS. Например:

#scene-one .go { animation-name: scene-one; }

Класс .go не представлен в разметке HTML, так что анимация не проигрывается при загрузке страницы. Вместо того, класс .go через промежутки вставляется через JavaScript в HTML. Как только элемент получает свой класс .go, его можно проигрывать.

function playSceneOne() { $('#scene-one').addClass('go'); }

В дальнейшем понимание того, как все это проделывается, весьма достойно тщательно отобранного и прокомментированного HTML, CSS и jQuery.

Приложение с названием Animatable от команды, стоящей за созданием Madmanimation, уже находится в пути. На самом деле это браузерный GUI (графический интерфейс пользователя) для создания сложной CSS-анимации.

Анимация CSS3 для реального применения

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

Однако, как прочие свойства CSS3, анимация может применяться в качестве стратегии «прогрессивного улучшения» (progressive enhancement). Искусное употребление анимации для создания ненасущных эффектов может гарантировать такой финальный штрих, который превратит хороший сайт в великолепный.

Возьмите Kaleidoscopeapp в Chrome’е или Safari. Обратили внимание на медленно движущееся цветное колесо в логотипе? Классно, правда? Этого эффекта можно добиться с помощью анимации ключевого кадра CSS.

Я создал демо-страницу, показывающую пять маленьких и простых идей улучшения анимации CSS3, которые вы могли бы применить в своих проектах сейчас. В первом примере я показал полный код (префиксы -moz- и –webkit-). В остальных примерах – только версии Firefox. Исходный код демо-версии демонстрирует и то, и другое.

Примечание: смотреть нужно в Firefox’е, Safari или Chrome’е.

1. Выпадающий заголовок

Анимировав относительное местоположение элемента, можно применить эффект, в соответствии с которым заголовок при загрузке страницы медленно падает на свое место. Ухудшение этого эффекта будет весьма элегантным, так как те, кто использует более старые браузеры, просто не увидят его.

header {
    /* Основные стили */
    background: black;
    color: white;
    height: 100px;
    position: relative;
}

Начнем с основных стилей. Мы установили высоту в 100px, цвет фона и текста и, что очень важно, позицию ‘position’ на относительную ‘relative’. Это позволит нам применить свойство ‘top’ для регулирования местоположения элемента. Далее нужно назначить анимацию.

@-moz-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}
@-webkit-keyframes header-drop {
    0% { top: -100px; }
    100% { top: 0px; }
}

Мы вызвали эффект header-drop. Единственное анимируемое нами в этом эффекте свойство – это относительная позиция элемента. Высота заголовка 100px, так что для удаления элемента с глаз долой в начале анимации нам нужно установить маркер 0% на top: -100px. В конце анимации необходимо, чтобы элемент показывался полностью, поэтому выставляем маркер 100% на top: 0px;. Все, что следует сделать дальше – это применить стиль анимации к элементу заголовка header, а также установить animation-timing-function, animation-iteration-count и animation-duration.

header {
    /* Основные стили */
    background: black;
    color: white;
    height: 100px;
    position: relative;
 
    /* Firefox 4+ */
    -moz-animation-name: header-drop;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 1s;
 
    /* Webkit */
    -webkit-animation-name: header-drop;
    -webkit-animation-timing-function: ease-in;
    -webkit-animation-iteration-count: once;
    -webkit-animation-duration: 1s;
}

2. Анимация цвета PNG-изображения с удаленным фоновым цветом

Эта идея сперта у Криса Койера (Chris Coyier) с CSS Tricks. Мы берем PNG-изображение в прозрачной форме с удаленным фоновым цветом и анимируем фоновый цвет. Здесь мы установили на медленный переход от красного к зеленому и синему цвет фона (который показывается через PNG).

Анимация цвета PNG

#logo {
/* Ensure that you set a background colour for browsers that don’t support animations */
    background: red;
    -moz-animation-name: colour-change;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 30s;
}
 
/* Set Animation */
@-moz-keyframes colour-change {
    0% { background: red; }
    33% { background: green; }
    66% { background: blue; }
}

3. Вращающийся элемент загрузки CSS3

Эта идея была навеяна статьей на 24ways.org от Тима Ван Дамма (Tim Van Damme). Тут он создает элемент загрузки, анимируя на картинке вращение на 360 градусов. Я решил попробовать сделать версию с одним лишь CSS, поэкспериментировав со свойством ‘border’.

Вращающийся элемент загрузки CSS3

.spinner {
    height: 10px;
    width: 10px;
    border: 10px solid #888;
    border-radius: 20px;
 
    -moz-animation-name: loading;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: infinite;
    -moz-animation-duration: 1s;
}

Здесь я установил толстую серую рамку в 10px вокруг div’а размером 10px x 10px. Затем применил border-radius для превращения ее в окружность. Во время анимации мы сменяем цвет верхней, правой, нижней и левой рамок на черный для создания эффекта вращения. На более старых браузерах можно было бы применить Modernizr для замещения вращающегося элемента на GIF, или же просто оставить его как статичную иконку.

@-moz-keyframes loading {
    0% { border-top: 10px solid black; }
    25% { border-right: 10px solid black; }
    50% { border-bottom: 10px solid black; }
    75% { border-left: 10px solid black; }
    100% { border-top: 10px solid black; }
}

4. Пульсирующий ошибочный ввод данных

Эта идея была вдохновлена эффектом радиоактивной кнопки, который я впервые увидел на Zurb. Анимировав свойство CSS3 box-shadow, можно при ошибочном ввод текста (или любого другого элемента) отобразить эффект пульсирующего свечения. Для применения к полю ввода данных класса .error, который имел бы назначенный стиль анимации CSS3 animation, можно было бы использовать плагин валидации данных jQuery. При анимации мы в основном осуществляем переход от размытого box-shadow в 5px к box-shadow в 15px. Мы установили animation-direction на alternate, так что анимация чередует проигрывание вперед-назад.

Пульсирующий ошибочный ввод данных

input[type="text"].error {
    border: 1px solid #D11919;
    border-radius: 6px; 
 
    -moz-animation-name: glow;
    -moz-animation-timing-function: ease-in;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: alternate;
    -moz-animation-duration: 500ms;
}
@-moz-keyframes glow {
    0% { box-shadow: 0 0 5px #D11919; }
    100% { box-shadow: 0 0 15px #D11919; }
}

5. «Дрожащий» ошибочный ввод данных

Это – другая идея, которая, возможно, лучше всего реализуется при помощи чего-то типа плагина валидации данных jQuery. Идея состоит в том, чтобы поле ввода данных «вибрировало», показывая, что оно не заполнено как следует или что введен неверный пароль. Этот эффект был довольно популярен в нескольких интерфейсах, включая Mac OSX. Как в первом примере, все, что мы делаем – это анимируем смену позиции поля ввода данных. Убедитесь, что она установлена на relative, чтобы дать нам возможность отрегулировать позицию left от 10px до (+)10px.

form {
    background: #CCC;
    border: 1px solid #888;
    border-radius: 10px;
    padding: 20px;
    width: 300px;
    position: relative; 
 
    -moz-animation-name: shakey;
    -moz-animation-timing-function: linear;
    -moz-animation-iteration-count: once;
    -moz-animation-duration: 200ms;
}
@-moz-keyframes shakey {
    0% { left: -10px; }
    25% { left: 10px; }
    50% { left: -10px; }
    75% { left: 10px; }
    100% { left: 0px; }
}

Примечание: смотреть нужно в Firefox’е, Safari или Chrome’е.

Ваша очередь

Вы видели какие-нибудь отличные примеры анимации как части идеи прогрессивного улучшения? Применяете анимацию CSS3 в своей работе? У вас имеются искусные маленькие анимационные приемы, которые вам нравится использовать? Или же вы лучше примените JavaScript или иной метод?

Автор: Rory Macrae

Источник: http://www.onextrapixel.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (5)

  1. Андрей Гурылёв

    Так как в кейфреймах можно использовать любые css-свойства, мне пришла в голову мысль использовать css3-свойство rotate.
    По ховеру вызывается анимация и объект под курсором вращается. Неплохо смотрится на квадратных иконках. пример: gurylyov.ru

  2. Игорь

    Здорово! Я как раз задумывал такую вещь у себя поставить при загрузке фотографий!

    Спасибо, попробую реализовать!

  3. ekaterina

    Мне очень понравилось!!! Научите меня тоже так-это всегда потребуется

  4. Эдуард

    Тема интересная!
    Спасибо!
    Ждём продолжения!
    (и поддержку всеми браузерами:)

  5. Александр

    Давно известна мне эта методика, иной раз использую в своих работах.

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

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

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree