Оживіть свої веб-сторінки за допомогою CSS-анімації та переходів

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

Сучасні користувачі покладають високі очікування на інтерфейс користувача через такий високоякісний вміст, доступний в Інтернеті. У міру розвитку інтерфейсів веб-сайтів змінюється і технологія, що стоїть за ними. Одним з основних компонентів, відповідальних за покращення інтерфейсу веб-сайту, є CSS.

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

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

CSS анімації

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

Вказівка ​​@keyframes

CSS-анімація визначається бітом із ключовими кадрами. Ці ключові кадри є проміжними точками анімації. Усі CSS-анімації вказуються за правилом @keyframes. Ці ключові кадри визначають, що відбувається з елементом у певний момент, тобто

• які властивості змінюються
• коли елемент оживляється
• як елемент оживляє

Ви можете визначити свій власний ключовий кадр як:

@keyframes animation_name
{
from{ property: value; }
to{ property: value; }
}

Тут «до» і «від» визначають початок і кінець анімації. Ми також можемо вказати анімацію для проміжних моментів часу між початком і кінцем так:

@keyframes name
{
0%{ property: value; }
50%{ property: value; }
100%{ property: value; }
}

Тут 0% означає початок анімації, 100% означає кінець анімації, а 50% означає зміну між початком і кінцем. Але як ми вкажемо браузеру, скільки часу має тривати анімація? Ми робимо це за допомогою певних властивостей анімації. Ці властивості анімації пов’язані з елементом, який потрібно анімувати. Наприклад:

element_name
{
animation_property: value;
style_property: value;
}

Тут елемент може бути будь-яким HTML-тегом, таким як div, span, img, p тощо, і style_propertyбудь-якою властивістю стилю CSS, як-от колір фону, ширина, висота тощо. Давайте тепер детально розглянемо деякі властивості анімації.

1. @keyframes: Ключові кадри використовуються для визначення коду анімації, як обговорювалося вище.
2. animation-name: ім’я, указане за допомогою @keyframes, є назвою анімації. Ця назва використовується для посилання на ключові кадри з елементом, який потрібно анімувати.
3. animation-duration: використовується для визначення тривалості анімації в секундах або мілісекундах. Наприклад, якщо ми встановимо 5 секунд, то анімація триватиме лише 5 секунд. Якщо ми не встановимо цю властивість, анімація не запускатиметься взагалі, оскільки її значення за замовчуванням дорівнює 0.
4. animation-delay: ми можемо відкласти початок анімації, вказавши час затримки анімації. Наприклад, якщо ви хочете запустити анімацію через 5 секунд після завантаження сторінки в браузері, просто встановіть animation-delay на 5 секунд.
5. animation-direction: за допомогою цієї властивості ми можемо вказати браузеру, чи рухається анімація у зворотному напрямку чи чергується. Наприклад, якщо ви хочете, щоб анімація запускалася від початку до кінця, тоді встановіть значення тривалості анімації як «звичайне». Якщо ви хочете, щоб він запускався з кінця до початку, просто встановіть значення "зворотний".
6. animation-fill-mode: ми можемо вказати стиль елемента, коли анімація не відтворюється в цьому режимі, тобто коли анімація затримується або закінчується, яким має бути стиль елемента.
7. animation-iteration-count: кількість разів, коли анімація може бути відтворена, представлена ​​цією властивістю. Наприклад, якщо ви хочете відтворити анімацію один раз, установіть для нього значення 1 або якщо ви хочете, щоб анімація відтворювалася вічно, просто встановіть для нього значення «нескінченно».
8. animation-timing-function: ця властивість використовується для визначення кривої швидкості анімації, як-от лінійної, прискорення чи уповільнення.
9. Анімація: це скорочена властивість для встановлення всіх властивостей анімації.

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

@keyframes slide {
 0% {
  left: 0;
  top: 0;
 }
 50% {
  left: 244px;
  top: 100px;
 }
 100% {
  left: 488px;
  top: 0;
 }
}
 
.stage:hover .object {
 animation: slide 2s linear;    /*shorthand animation property*/
}
 
.object {
 background: #2db34a;
 border-radius: 50%;
 height: 50px;
 position: absolute;
 width: 50px;
}

Переходи

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

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

element
{
style_property: value;
transition_property: value;
}

Тут елемент визначає елемент HTML, який ви хочете перетворити, наприклад div, H1, img тощо. style_property — це стиль CSS, застосований до цього елемента. Давайте тепер розглянемо деякі властивості переходу :

• Властивість переходу: ефект переходу завжди буде застосовано до властивостей CSS елемента, таких як його ширина, висота, колір або форма. Значення цього атрибута визначає цю властивість CSS елемента. Ефект переходу запускатиметься кожного разу, коли ця властивість змінюватиметься, наприклад, під час наведення курсора миші чи клацання.
• conversion-timing-function: це функція полегшення, яка буде застосована до елемента. Ця властивість використовується для вказівки кривої швидкості переходу, наприклад ease-in, ease-out, linear тощо.
• тривалість переходу: це як властивість тривалості анімації. Він використовується для визначення тривалості ефекту переходу в секундах або мілісекундах. Наприклад, якщо ми встановимо значення 5 секунд, перехід завершиться через 5 секунд. Якщо ми не встановимо цю властивість, переходу не буде взагалі, оскільки його значення за замовчуванням дорівнює 0.
• затримка переходу: за допомогою цієї властивості ми можемо вказати тривалість часу для затримки ефекту переходу. Наприклад, якщо ви хочете запустити ефект через 5 секунд після наведення миші, просто встановіть затримку переходу на 5 секунд.
• перехід: це скорочена властивість для встановлення всіх наведених вище властивостей переходу разом.

Наприклад, наступний код змінить ширину елемента div при наведенні курсора миші. Перегляньте властивість переходу, застосовану тут.

div {
  width: 50px;
  height: 50px;
  background: blue;
  transition: height 4s;     /*transition shorthand on height for 4 seconds*/
}
div:hover {
  height: 200px;      /* increase height on mouse hover */
}

Анімація проти переходів

Подібності між анімацією та переходами

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

Відмінності між анімацією та переходами

• Переходи CSS реактивні. Їх мають запустити користувачі. З іншого боку, анімація запускається щоразу, коли сторінка завантажується у браузері. Їх не потрібно запускати.
• Переходи виконуються один раз, а потім припиняються. Потім ми повинні запускати їх знову і знову, поки анімація може повторюватися. Вони можуть почати з власної зупинки, а потім почати знову.
• Браузер сам піклується про переходи. Нам просто потрібно вказати початок і кінець переходу. Ми можемо встановити ефект переходу, але ми не можемо змінити швидкість зміни переходу між ними. Наприклад, якщо зображення ковзає під час наведення курсора миші, ми побачимо, як воно зникає або зникає, коли ми наводимо на нього курсор.
• З іншого боку, анімація надає можливість змінювати властивості між початком і кінцем. Це відбувається за допомогою ключових кадрів. Наприклад, ми можемо встановити червоний колір зображення протягом перших 5 секунд, потім синій протягом наступних 5 секунд, потім зелений протягом наступних 5 секунд і жовтий протягом останніх 5 секунд анімації. Отже, ми маємо контроль над анімаціями.

Префікси постачальників

Усі функції CSS3 підтримуються не всіма браузерами. Тому ми використовуємо префікси в цих властивостях CSS для певних браузерів, наприклад -webkit- (Safari), -moz- (Firefox) або -o- (Opera). Це дозволяє маркерам браузера додавати підтримку цієї функції CSS3. Ці префікси відомі як префікси постачальників або префікси браузера CSS. Отже, нам потрібно додати префікси постачальника разом із властивостями анімації та переходу. Наприклад, розгляньте наведений нижче код і подивіться, як використовувалися префікси постачальника для Safari:

div {
width: 100px;
height: 100px;
background: red;
 
/* For Safari 3.1 to 6.0 */
-webkit-transition-property: width;
-webkit-transition-duration: 2s;
-webkit-transition-timing-function: linear;
-webkit-transition-delay: 1s;
 
/* Standard syntax */
transition-property: width;
transition-duration: 2s;
transition-timing-function: linear;
transition-delay: 1s;
}

Порада! Ви можете уникнути цієї метушні, використовуючи такі бібліотеки, як -prefix-free. Це бібліотека JavaScript, яка додасть поточний префікс браузера до будь-якого коду CSS. Перегляньте багато таких бібліотек, доступних в Інтернеті.

Висновок

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