Анімація інтерфейсів за допомогою CSS

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

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

Анімація — це набір ключових кадрів, або кейфреймів, які зберігаються в CSS

@keyframes animation-test {
0% {
width: 100px;
}
100% {
width: 200px;
}
} 

Розберемося, що тут відбувається. Ключове слово @keyframes означає саму анімацію. Потім йде ім'я анімації, в нашому випадку — animation-test. У фігурних дужках міститься список кейфреймів. Ми використовуємо початковий кадр 0% і кінцевий 100% (їх також можна записати як from і to).

Погляньте на код нижче. Анімацію можна задати і таким чином:

@keyframes animation-test {
from {
width: 0;
}
25% {
width: 75px;
}
75% {
width: 150px;
 }
to {
width: 100%;
}
}

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

Під’єднати анімацію до елемента можна так:

element-selector {
animation-name: your-animation-name;
animation-duration: 2.5s;
} 

Властивість animation-name задає ім'я для анімації @keyframes. Правило animation-duration Правило animation-duration задає тривалість анімації в секундах (1s, 30s, .5s) або мілісекундах (600ms, 2500ms).

Так само можна групувати кейфрейми:

@keyframes animation-test {
0%, 35% {
width: 50px;
}
75% {
width: 200px;
}
100% {
width: 100%;
}
}

До одного елементу (селектору) можна застосувати декілька анімацій. Їх імена і параметри повинні бути записані в порядку застосування:

element-selector {
animation-name: anim-name-1, anim-name-2;
animation-duration: 1s, 3s;
} 

Затримка анімації

Властивість animation-delay задає затримку перед відтворенням анімації в секундах або мілісекундах:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 2s; /* перед запуском анимации пройдет 2 секунды */
} 

Повторне відтворення анімації

Використовуючи animation-iteration-count ми можемо вказувати число повторів анімації: 0, 1, 2, 3, і т.д. Або infinite для зациклення:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 4s;
animation-iteration-count: 5; /* анимация воспроизводится 5  раз */
}

Стан елемента до і після анімації

За допомогою властивості animation-fill-mode  можна вказувати, в якому стані елемент буде перебувати до початку анімації і після завершення:

• animation-fill-mode: forwards; — елемент анімації буде перебувати в стані останнього кейфрейма після завершення / відтворення;

• animation-fill-mode: backwards; — елемент буде перебувати в стані першого кейфрейма;

• animation-fill-mode: both; — перед початком анімації елемент буде перебувати в стані першого кейфрейма, після завершення — в стані останнього.

Запуск і зупинка анімації

За це відповідає властивість animation-play-state, яка може приймати два значення:running або paused.

element-selector:hover {
animation-play-state: paused;
}

Напрямок анімації

Властивість animation-direction, вказує на те, як керувати напрямком відтворення анімації. Ось можливі значення:

• animation-direction: normal; —  анімація відтворюється в прямому порядку;

• animation-direction: reverse; —  анімація відтворюється в зворотному порядку, від to до from;

• animation-direction: alternate; — парні повтори анімації відтворюються в зворотному порядку, непарні — в прямому;

• animation-direction: alternate-reverse; —  непарні повтори анімації відтворюються в зворотному порядку, парні — в прямому.

Функція плавності виведення анімованих кадрів

Властивість animation-timing-function дозволяє задати спеціальну функцію, що відповідає за швидкість відтворення анімації. За замовчуванням, анімація починається повільно, розганяється і сповільнюється в кінці. Зараз у нас існують такі визначені значення: linear, ease, ease-in, ease-out, ease-in-out, step-start, step-end.

Однак ви можете створювати такі функції самостійно. Значення animation-timing-function: cubic-bezier(P1x, P1y, P2x, P2y);  приймає на вхід 4 аргументи і будує криву розподілу процесу анімації.

Вивчити докладніше або випробувати створення цих функцій можна на сайті http://cubic-bezier.com

І, нарешті, анімацію можна розбити на набір окремих значень (кроків) за допомогою функції steps яка приймає на вхід кількість кроків і напрямок (start или end). На прикладі нижче анімація складається з 5 кроків, останній з яких відбудеться прямо перед завершенням анімації:

element-selector {
animation-name: anim-name-1;
animation-duration: 3s;
animation-delay: 5s;
animation-iteration-count: 3;
animation-timing-function: steps(5, end);
} 

Підтримка браузерів для анімації

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

Значення з  -webkit-, -moz- або -O- вказує першу версію, яка працювала з префіксом.

На сайті w3schools можна детальніше вивчити CSS анімацію (з прикладами).

Одна з популярних бібліотек для роботи з анімацією — animate.css.

Може здатися, що труднощі, з яким стикаєшся при роботі з CSS анімаціями, не виправдані. Але це зовсім не так.

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

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

Сподіваюся, в статті ви знайшли корисну інформацію для себе. Всім красивих сайтів. Не забувайте про анімашки :)