CSS анімації: Покращте ваш сайт за допомогою цих 17 варіантів

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

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

У цьому посібнику ми допоможемо вам досягти цього за допомогою:

• Вступ до CSS та CSS анімацій
• Основні причини, чому вам варто спробувати CSS анімації
• Декілька перешкод для впровадження CSS анімацій (з рішеннями)
• 17 прикладних CSS анімацій для використання у вашому додатку чи вебсайті
• Як почати використовувати CSS на вашому вебсайті

Знайомство з CSS

CSS – це скорочення від Cascading Style Sheets.

CSS — це мова кодування, яка визначає, як графічні та контентні елементи на веб-сайті або додатку виглядають та діють. CSS корисний для налаштування кольорів та шрифтів, позиціонування та розміщення елементів на сторінці, а також, звичайно, для створення анімацій. Існують “чисті” CSS анімації, створені тільки з HTML (Мова розмітки гіпертексту) та CSS коду, і є CSS анімації, які включають інші типи коду (наприклад, JavaScript) або існуючі медіа (наприклад, GIFи).

CSS з’явився на сцені на початку 1990-х років і з тих пір розвинувся від CSS1 до CSS2 до CSS3 — поточної та широко використовуваної версії. У цій статті ми будемо дотримуватися загальноприйнятої практики використання терміну «CSS» при посиланні на цю останню версію.

HTML схожий на фундамент і каркас будинку, без якого будинок не може існувати. Але CSS перетворює цей будинок за допомогою фарбування, обробки та декору, що надає унікальний стиль і функціональність.

Базові елементи CSS анімацій

Анімації CSS використовують код CSS для послідовного з’єднання різних властивостей та значень, які роблять елементи на екрані “рухомими”.

CSS властивості — це елементи анімацій, такі як фон, радіус межі, шрифт, відступ, тип руху (наприклад, обертання або затемнення) тощо. Значення доповнюють деталі цих властивостей анімації, визначаючи колір, вирівнювання, розмір, тривалість, напрямок, швидкість тощо.

Давайте розглянемо елементи популярного правила @keyframes, яке визначає CSS переходи на протязі послідовності анімації, на прикладі взаємодії властивостей та значень:

• Властивість animation-name вказує назву анімації.
• Властивість animation-duration визначає тривалість анімації. Значення зазвичай вказуються в секундах (0с, 4с тощо).
• Властивість animation-delay вказує на затримку початку анімації. Її значення також вказується у секундах (-2с, 5с тощо).
• Властивість animation-iteration-count вказує кількість повторень анімації. Значення представляє, скільки разів ви хочете повторити анімацію; наприклад, infinite-alternate означає безкінечне повторення.
• Властивість animation-direction вказує, як має відтворюватися анімація. Значення включають normal (вперед), reverse, alternate тощо.
• Властивість animation-timing-function описує криву швидкості. Значення включають ease-in-out для м’якого старту та завершення, cubic-bezier для створення складної кривої тощо.
• Властивість animation-fill-mode визначає, як виглядає елемент, коли анімація не відтворюється. Значення включають forwards, щоб зберегти значення, встановлені останнім кадром, тощо.

Тепер об’єднаємо все разом! У цьому прикладі з W3Schools, де анімація (з назвою “example”) прикріплена до елемента <div>, ви можете побачити, що елемент має розмір 100 на 100 пікселів та червоний колір фону. Коли анімація починається, вона триватиме 4 секунди, під час яких фон переходить з червоного у жовтий:

/* Код анімації */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}

/* Елемент, до якого застосовується анімація */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Примітка: Це лише один приклад. Анімації ключових кадрів — це не єдиний спосіб створення CSS анімацій, і вони не сумісні з кожною версією браузера — продовжуйте читати, щоб дізнатися більше про сумісність та отримати поради.)

3 чудові причини використовувати CSS анімації

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

Створіть унікальну історію та досвід

Дні, коли вебсайти виконували функції цифрових білбордів, вже позаду.

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

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

І ваша історія частково заснована на інтерактивних елементах, які ви включаєте в свій користувацький досвід.

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

Оновлення та підтримка з меншою кількістю клавіш

CSS — це організована та досить стисла мова програмування. У світі веб-розробки вона вважається “чистою”. Таблиці стилів зазвичай можуть бути мінімізовані для простих проектів додатків та веб-сайтів.

Це означає, що коли настане час оновити ваш проект, провести рутинне обслуговування або просто оновити ваш вигляд та досвід — вам буде досить легко відстежити, де потрібно внести зміни, створити ваше оновлення та застосувати його на всьому вашому інтерфейсі. Немає необхідності перекодувати та розгортати багато окремих файлів HTML.

Оптимізуйте вашу швидкість

CSS вважається «легковісним» порівняно з JavaScript та іншими мовами програмування, що робить його чудовим інструментом для додавання живого, захоплюючого вмісту та досвіду до вашого продукту — без додавання ваги, яка сповільнює завантаження.

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

Як важливий фактор ранжування у результатах пошуку Google, швидкість є тим, про що повинні думати всі бізнеси з онлайн-присутністю.

Розгляд перед зануренням у CSS анімації

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

Проблеми сумісності

Чи звертали ви увагу на те, що деякі особливості зникають або заважають, коли ви взаємодієте з вебсайтом на телефоні — або сповільнюють ваш комп’ютер дуже сильно?

Різні пристрої (мобільні телефони, розумні годинники, планшети, комп’ютери тощо) та браузери (Chrome, Safari, Firefox тощо) створені на основі різних технологій. Ці технології визначають, як вони взаємодіють з мовами кодування, і це може відрізнятися — і з анімаціями CSS ситуація не виняток.

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

Тестування забезпечення якості (QA) є критично важливим для забезпечення сумісності ваших CSS анімацій у всіх місцях, де користувачі взаємодіють з вашим цифровим присутністю.

Рішення: Використовуйте валідатор CSS та інструменти розробника браузера для виявлення проблем сумісності та помилок під час створення CSS. Особливо обізнані в кодуванні можуть встановити бібліотеку mixin Sass, таку як Bourbon, для підтримки оновлення та сумісності префіксів браузерів (webkit для Chrome та Safari, moz для Firefox тощо).

17 динамічних CSS-анімацій, які варто спробувати сьогодні

Готові використовувати анімації CSS для створення неймовірних цифрових вражень, які приваблюють та утримують користувачів? Готові збільшити дуже важливу швидкість сайту та скоротити час на обслуговування та перепроектування?

Тоді ви потрапили в правильне місце! Ми зібрали деякі чудові анімації CSS для вашого перегляду. Клікніть на будь-який варіант, який вам сподобався, щоб отримати код, який вам потрібен, а потім ви можете додати його до свого таблиці стилів веб-сайту. (Для вашої інформації, публічні Пени на CodePen безкоштовні для використання будь-ким та з будь-якою метою згідно з їх деталями ліцензії.)

Анімації завантаження

Анімації завантаження можуть не бути найцікавішим класом CSS-анімацій, але вони важливі для користувацького досвіду. Відвідувачі програм і веб-сайтів імовірніше залишаться терплячими з невеликим часом завантаження, коли ви надали індикатор того, що незабаром з’явиться щось чудове.

1. “CSS Loader з крапками” від Аляксей Петерсон

Наразі, пульсуючий рядок крапок є універсальним для «Щонохвилини!» Як і код, ця опція є чіткою та лаконічною, що робить її добре підходящою для онлайн-присутності з серйозним тоном або мінімалістичним стилем.

Дивіться ручку
CSS Loader з крапками від Aliaksei Peterson (@petersonby)
на CodePen.

2. “Прості завантажувальні індикатори HTML & SVG” за авторством Стівена Делані 

Ще один класичний символ завантаження — обертовий елемент. Ця анімація має опцію інтеграції SVG, що означає Scalable Vector Graphic, яку можна масштабувати без втрати якості.

Дивіться Pen
Прості завантажувальні спінери HTML & SVG від Стівен Делані (@sdelaney)
на CodePen.

3. “Анімація завантаження” від Мохамеда Юсефа

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

Дивіться Pen
Анімація завантаження від Mohamed Yousef (@Freeps2)
на CodePen.

4. “Тільки Css Анімація #02” автора Хісамі Куріта

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

Дивіться Pen
Лише Css анімація #02 від Hisami Kurita (@hisamikurita)
на CodePen.

5. “Світяться індикатор завантаження – Анімація на чистому CSS” від Максіма Россіньоля

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

Дивіться ручку
Світиться завантажувач – Чиста CSS анімація від Maxime Rossignol (@Maxoor)
на CodePen.

Анімації контенту

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

6. “Зміна анімації тексту CSS” автор Coding Yaar

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

Дивіться Pen
Changing Text Animation CSS від Coding Yaar (@codingyaar)
на CodePen.

7. “Ефект відкривання CSS блоку” від Абубакера Саїда

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

Дивіться Pen
Ефект розкриття CSS блоку від Abubaker Saeed (@AbubakerSaeed)
на CodePen.

8. “CSS Reveal Slider” автора Адама Куна

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

Дивіться Pen
CSS Reveal Slider від Адама Куна (@cobra_winfrey)
на CodePen.

9. “Анімована інформаційна картка” від Адама Куна

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

Дивіться ручку
Animated Info Card від Адама Куна (@cobra_winfrey)
на CodePen.

Анімації кнопок

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

10. “Ефект слайду кнопки CSS при наведенні” автора RazorX

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

Перегляньте ручку
Ефект ковзання кнопки CSS при наведенні від RazorX (@RazorXio)
на CodePen.

11. “Анімації кнопок” від Alex Belmonte

Хочете додати трохи руху до своїх кнопок? Додайте ефект наведення та дії, такі як стрибки, хитання та більше до своїх кнопок за допомогою цього CSS.

Дивіться ручку
Анімації кнопок від Alex Belmonte (@AlexBelmonte)
на CodePen.

12. “Ефект наведення на кнопку CSS” автора Юлія

Мінімальне, але вражаюче додавання кольору надає вашим кнопкам елемент несподіванки та захоплення.

Дивіться Pen
Ефект наведення на кнопку CSS від Юлії (@sfoxy)
на CodePen.

Фонові анімації

Ви хочете, щоб фони певних елементів вашого вебсайту або додатку були достатньо цікавими, щоб привернути увагу — без затьмарення того, що ви хочете, щоб користувачі читали та робили.

13. “Анімований фоновий градієнт” авторства Маріо Клінгемана

Застосуйте цю нескінченну петлю кольорів до фону ключових розділів вашого веб-сайту або додатку, щоб додати руху.

Дивіться Пен
Анімований градієнт тла від Маріо Клінгемана (@quasimondo)
на CodePen.

14. “Анімації CSS з SVG” від Joyanna

М’які, кольорові форми з делікатними рухами створюють виразний фон для ваших найважливіших розділів контенту.

Дивіться ручку
Анімації CSS з SVG від Joyanna (@joyanna)
на CodePen.

15. “Просте паралакс прокручування” автора Унгмо Лі

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

Дивіться перо
Просте паралакс-прокручування від Ungmo Lee (@ungmo2)
на CodePen.

Анімації будь-де

Спробуйте ці анімації CSS для розваги, щоб додати трохи *родзинки* в різні моменти користувацького досвіду.

16. “Шаблон: Логотип” від Алекса Катца

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

Подивіться на ручку
Шаблон: Логотип Алекса Каца (@katzkode)
на CodePen.

17. “Плаваюча анімація – CSS” від Маріо Дуарте

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

Перегляньте Pen
Плаваюча анімація – CSS від Mario Duarte (@MarioDesigns)
на CodePen.

Як додати CSS до вашого сайту

Кожна з вищезазначених CSS анімацій супроводжується HTML, CSS та іноді іншим кодом, який ви можете вставити прямо у свій файл стилів сайту та відредагувати за потреби, щоб він став вашим власним.

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

Ви помітите з наведених вище прикладів, що для створення анімації може знадобитися чимало коду. Якщо ви впевнено володієте CSS та готові оптимізувати простір і час, розгляньте можливість використання бібліотеки анімацій CSS. Кожна бібліотека матиме інструкції, як додати її на ваш сайт, зазвичай це передбачає додавання файлу джерела або CDN до вашої розмітки. Після установки ви зможете використовувати специфічне для бібліотеки скорочення анімацій для додавання ваших анімацій.

Якщо ви працюєте з сайтом на WordPress, сама платформа пропонує зручний посібник з редагування CSS, використовуючи або Редактор сайту (бета-функція, доступна в деяких темах), або налаштувальник (доступний у більшості класичних та деяких сторонніх темах). Саме на цих екранах редагування ви вставлятимете код з наших прикладів анімації CSS вище.

А що, якщо вебсайт, який дозволяє вам розповісти історію вашого бренду, все ще є лише мрією? Тоді у нас є добрі новини, адже в DreamHost ми спеціалізуємося на здійсненні мрій про вебсайти. З індивідуальним веб-дизайном, легким у використанні конструктором сайтів WordPress website builder, професійними послугами від наших фахівців та, звісно, надійними варіантами хостингу — DreamHost допоможе вам вивести вашу мрію в онлайн.