Заказать проект
Оставьте заявку для получения коммерческого предложения.
Заполните форму и мы вышлем Вам предложение в котором решим,
чем можем вам помочь.
Анімація інтерфейсів за допомогою CSS

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

10 Мая 2018
Андрій Шевцов
Front End Developer
Андрій Шевцов
следующая статья

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

У своїй статті я поділюся знаннями про анімацію 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 анімацій допоможе «вдихнути життя» в наявніі або нові інтерфейси. Розробивши загальні та оригінальні підходи, розібравшись в особливості технології можна робити унікальні юзабіліті інтерфейси майже для всіх проектів.

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

Need help?

Ask a question.

Chat Now
Записаться На Консультацию
Записаться На Консультацию
Мы свяжемся
с вами
в течении
10 минут
laptop
Мы свяжемся с вами в течении 10 минут