Використання переходів та анімацій CSS3 для виділення змін інтерфейсу

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

З тих пір з'явилися нові і нові підходи, такі як нещодавно популярне кінетичне мистецтво, яке розширює перспективу глядача за допомогою багатовимірного руху. Рух також з'явився в інформатиці з винаходом першого миготливого курсору в 1967 році.

В інтерфейсі розробки DOM, як правило, анімовані JavaScript перед виходом CSS3, і це метод, який все ще працює, але Нові властивості, введені CSS3, дозволяють покращити наші конструкції з різними ефектами і рухом більш інтуїтивним способом.

Дві основні прийоми, які пропонує CSS3, - це переходи та анімація. У цій посаді ми подивимося на те, що вони є, яка різниця між ними, і як ви можете їх використовувати.

Переходи

І переходи, і анімації візуалізувати зміни в державі елемента HTML зміна одного або декількох властивостей CSS.

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

Зміна властивостей CSS посилання на наведенні (або фокусування або клік) є найстарішою і найпростішою формою переходів, і вона існувала задовго до ери CSS3.

 a колір: оранжевий;  a: hover color: red;  a: фокус колір: синій;  a: visit color: green; 

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

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

1. Вони завжди мають початкове і кінцеве стан.
2. Стани між початковою та кінцевою точками неявно визначаються браузером, ми не можемо змінити це за допомогою CSS.
3. Вони вимагають явне спрацьовування, наприклад, додавання нового псевдоклара за допомогою CSS або нового класу за допомогою jQuery.

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

Анімації

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

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

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

Найбільш важливі речі, які потрібно знати про анімації CSS3, включають:

1. вони не вимагають явного запуску, вони можуть починатися з завантаження сторінки або коли в браузері відбувається інше подія DOM
2. вони можуть бути використані у випадках, коли використовуються переходи, наприклад, коли додається або видаляється новий клас або псевдоклас (хоча це і рідше)
3. вони вимагають визначити деякі ключові кадри (проміжні стани)
4. ми можемо вказати номер, частоту та стиль цих ключових кадрів

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

Ці нові класи анімовані за допомогою вказаних @keyframes правила у файлі CSS. Додаткові класи видаляються jQuery, коли користувач натискає кнопку наступного разу, і меню знову приховується.

Властивості CSS та @keyframes At-Rule

Для переходів ми можемо використовувати або перехід скорочене властивість або 4 властивості, пов'язані з одним переходом: перемикання-властивість, тривалість переходу, функція переходу-синхронізації, і затримка переходу. Властивість скорочення містить всі одиничні властивості у скороченому вигляді.

Для анімації є анімація скорочення властивостей у наших руках, що становить не менше 8 одиничних властивостей анімації, а саме animation-name, тривалість анімації, анімація-timing-функція, затримка анімації, анімація-ітерація-лічильник, напрямок анімації, режим анімації-заповнення, і анімація-відтворення-стан.

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

 .елемент (фон: оранжевий; transition-property: фон; перехід-тривалість: 3s; функція переходу-синхронізації: простота;  .елемент: hover фон: червоний; 

Ми вказали фону власності, тому що це те, що буде змінено під час переходу.

Ми можемо змінити більше одного властивості CSS в одному переході, в цьому випадку код вище буде змінено так: перехід-властивість: фон, кордон;. Ми можемо також використовувати property-перехід: все;, якщо ми не хочемо вказати кожну властивість окремо.

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

 .елемент (фон: оранжевий; перехід: фон 3s полегшений;  .елемент: hover фон: червоний; 

Якщо ми хочемо створити анімацію, ми повинні вказати пов'язані ключові кадри. Властивості CSS потрібно змінювати окремо @keyframes правила. Ось приклад того, як ми можемо це зробити:

 .element position: relative; animation-name: слайд; тривалість анімації: 3s; анімація-timing-функція: простота-в;  слайд фреймів 0% left: 0;  50% left: 200px;  100% left: 400px; 

У наведеному вище прикладі ми створили дуже простий ефект ковзання. Ми визначили animation-name, потім зв'язали 3 ключові кадри, які ми вказали в @keyframes slide … правила. Відсотки відносяться до тривалості анімації, тому 50% відбувається у 1,5s у прикладі.

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

 .element position: relative; анімація: зручність слайда 3s;  @keyframes slide from left: 0;  до left: 400px; 

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

При побудові переходів і анімацій, ви повинні знати це не всі властивості CSS можуть бути анімовані, тому завжди варто перевірити властивість, яку потрібно змінити, у CSS Animatable.

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