Оживляємо сайт за допомогою CSS-анімації

28

Від автора: анімація швидко стає важливим інструментом в дизайні і все частіше використовується для того, щоб допомогти користувачеві зрозуміти що-небудь, а також для взаємодії з нашою роботою. За останні роки анімація стала набагато краще працювати в браузерах і на мобільних пристроях. За фактом всі сучасні десктопні браузери йдуть з вбудованою підтримкою CSS-анімації. CSS дає нам і інші чудові інструменти, ще ніколи не було кращого часу, щоб надати нашому дизайну руху. Але чому анімація так важлива? Та з чого почати?

Чому CSS анімація важлива в наших дизайнах?

Рух – велика складова того, як ми взаємодіємо зі світом і розуміємо його. Це вроджений інстинкт.

Еволюція постаралася, щоб ми добре розпізнавали рух. Рух захищає нас і допомагає помічати зміни в оточенні. Воно додає додатковий рівень комунікації крім слів. Спостереження за рухом і візуальні підказки дозволяють нам невербально розуміти складні дії та ідеї.

Анімацію у вебі можна використовувати для досягнення того ж ефекту, а також щоб додати глибину і значення діалогу між нашими користувачами і інтерфейсом.

Наприклад, можна анімувати елементи так, щоб вони йшли за екран при видаленні, а при додаванні виїжджали назад. Таке просте рух допомагає нам зрозуміти, звідки беруться ці елементи. Така анімація доповнює нашу розумову модель, з якою ми працюємо, і робить взаємодію багатшим і більш значущим.

За допомогою анімації можна привертати увагу до певних елементів інтерфейсу, а також розповідати історії і вести користувачів крок за кроком.

Анімація і плавні переходи разом з микровзаимодействием на сайті або в додатку допомагають залучити користувачів, здивувати їх і порадувати. Це також потужний спосіб дати користувачеві відгук на його дії: наведення миші, кліки по кнопках і заповнення форм. Все це доповнює діалог і допомагає налаштувати інтерфейс.

А що з JavaScript?

CSS – не єдиний спосіб додати анімацію дизайн, але найпростіший. З появою jQuery нам відкрилася можливість анімувати і рухати елементи на сторінці за допомогою JS.

А зовсім недавно потужні пакети типу GreenSock GSAP додали в браузери просунуту анімацію, навіть у браузери без підтримки CSS-анімації. Вони забезпечили детальний контроль над анімацією, хорошу зворотну сумісність і безліч корисних функцій.

Але у всього є своя ціна. Додаткові JS залежно роблять наш проект важче, що виливається в довге завантаження і обробку сторінок. На швидких з’єднаннях це не так помітно, але більша частина світу використовує повільні з’єднання і мобільні пристрої. Тому потрібно пам’ятати про продуктивності.

Додаткову складність несуть JS-фреймворки, вони ускладнюють обслуговування коду і є потенційними джерелами помилок.

І все ж, JS анімація проробила довгий шлях, це потужний і корисний інструмент для створення просунутої та складної анімації.

З CSS можна зробити багато чого, не вдаючись до плагінів: це найшвидший і простий спосіб почати створювати анімацію.

Анімація на CSS

Браузери підтримують CSS (у різному ступені).

Так само, як ми використовували властивості font-size, background в стилях для створення візуального дизайну, можна використовувати властивості transition, animation і keyframes для створення руху.

Властивість transition можна використовувати для згладжування змін в стилях при наведенні курсору. З допомогою keyframes можна задавати цикли з кількох станів, а також створювати складні ефекти. За допомогою вбудованих CSS властивостей можна контролювати тривалість анімації і напрям. Після недовгого вивчення все буде здаватися таким знайомим навіть тим, у кого мізерні знання в CSS.

Знання можливостей CSS допомагає при виборі між keyframes і JS.

Чому не почати прямо зараз?

Чим хороша CSS-анімація – вас нічого не зупиняє, ви можете почати прямо зараз. Вам потрібен лише браузер і текстовий редактор, або ж можна скористатися сервісом типу CodePen.

Захоплюватися анімацією в браузерах можна по безлічі причин. Є безліч чудових прикладів, коли анімація покращувала не тільки зовнішній вигляд сайту, але і взаємодію, а також рятувала від плутанини. Однак анімація не тільки практичний інструмент, працювати з нею весело, вона оживляє інтернет.

Нещодавно я разом з SitePoint створив новий курс за анімації за допомогою CSS. Я дуже хвилююся з цього приводу. Мені здається, життєво важливо навчити людей, як робити щось нове в інтернеті, щоб мережа ставала все краще. Це розширення моєї роботи на CSSAnimation.rocks, ще один чудовий ресурс для вивчення CSS-анімації.

Що ви дізнаєтеся з курсу:

Анімація в браузері. Встановлення сцени для курсу, вивчення переваг і принципів анімації.

Переходи – від А до Б. Навчитеся додавати плавні переходи в стилі для двох станів.

Keyframe анімація. Навчитеся створювати більш складні рухи з допомогою @keyframes і властивості animation. Спочатку теорія, потім практичні приклади.

Функції анімації та таймінгу. Дізнаєтеся, як додати характер і контролювати таймінг анімації за допомогою функцій анімації і кубічних функцій Без’є.

Збираємо всі разом. Переходимо на наступний рівень. Комбінуємо ефекти і створюємо кілька переходів і анімації.

Питання по браузерам. Обговоримо підтримку в браузерах, вендорные префікси і продуктивність. Переконаємося, що ваша анімація буде працювати на максимальній кількості пристроїв.

Доступність і анімація. Вирішимо проблеми з доступністю, а також переконаємося, щоб наша анімація не відволікала і не укачивала.

Крім теорії і практичних прикладів з курсу натхнення можна почерпнути в безлічі місць. Я люблю дивитися концепти анімації на Dribbble. На сайті Use Your Interface можна знайти безліч надихаючих матеріалів по інтерфейсах. Для iOS є сайт Capptivate. Потрібно щось для кінематографа, додайте в закладки Art of the Title.

Анімація може багато чого дати дизайну. Вона допомагає спілкуватися, розповідати історії, вона може бути цікавою і творчою. Навчитися створювати анімацію легко, а далі все залежить тільки від вашої фантазії. Так чому б не почати. Спробуйте щось нове і переконайтеся, як рух пожвавить ваш дизайн!