Вдосконалюйте сайти з допомогою CSS3-анімації

12

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

Вдосконалюйте сайти з допомогою CSS3-анімації

Вдосконалюйте сайти з допомогою CSS3-анімаціїВдосконалюйте сайти з допомогою 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).

Вдосконалюйте сайти з допомогою CSS3-анімації

#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, так що анімація чергує програвання вперед-назад.

Вдосконалюйте сайти з допомогою CSS3-анімації

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 або інший метод?