2 of 25

Пригадаємо

Які графічні формати та якими командами мови розмітки відображаються?
Що таке screen-reader? Для чого він призначений?
Які обов’язкові атрибути має тег для відображення графічних об’єктів на веб-сторінці?
Які стилі використовують для відображення графічного об'єкта на веб-сторінці?
Обґрунтуйте використання атрибутів ширини та висоти зображення.
Який вид комп'ютерної графіки краще використовувати для фотографій �

3 of 25

Анімація є одним із трендів у дизайні веб-інтерфейсів, невід’ємна частина будь-якого сайта.�Анімаційні ефекти можна застосовувати до окремих об'єктів: кнопок, списків, меню, а також до зображень. �

4 of 25

Анімовані об’єкти. Це окремі зображення і об’єкти, які показуються користувачеві. Наприклад, курсор, що рухається, плаваюча кнопка «вгору», кнопки заклику до дії, зміна кольору тощо.�
Анімовані зображення. Це можуть бути рекламні банери на сайті, що ведуть на внутрішні сторінки, блог чи перенаправляти відвідувача на інший сайт. Другий приклад анімованих зображень – слайд-шоу з фотографій.

Сучасні можливості анімації дозволяють зробити найрізноманітніші слайдери: на повний екран, з 3D-ефектами, адаптивні (які проглядаються з будь-яких мобільних пристроїв) та інші.�

5 of 25

Обговорюємо

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

6 of 25

Анімаційні ефекти можна створювати або виключно засобами каскадних таблиць стилів, або ж за допомогою JavaScript.

�CSS-анімація робить можливим анімацію переходів�(transitions) з однієї конфігурації CSS-стилю до іншої.

7 of 25

CSS-анімація

Складається з двох компонентів:

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

8 of 25

Таблиця властивостей animation

Параметр	ОПИС
animation-delay	Встановлює час очікування перед запуском циклу анімації.
animation-direction	Встановлює напрямок руху анімації.
animation-duration	Скільки часу потрібно анімації на один цикл.
animation-fill-mode	Стиль для елемента, коли анімація не відтворюється (коли вона анімація закінчена або має затримку)
animation-iteration-count	Скільки разів анімація повинна повторитися.
animation-name	Задає ім'я @keyframes для анімації
animation-play-state	Зупиняє чи запускає анімацію.
animation-timing-function	Тип прискорення анімації.

9 of 25

Порядок дій створення CSS-анімації �

оголошення імені анімації в блоці @keyframes і визначення так званих кроків анімації, або ключових кадрів.

Крок 1

послідовно від 0 до 100 % прописуються властивості для кожного ключового кадру. Між цими значеннями можна вставляти скільки завгодно проміжних значень

Крок 2

використання CSS властивості animation.

Крок 3

10 of 25

Властивість «transform»

дозволяє застосовувати 2D або 3D трансформацію до елементу. Ця властивість дозволяє обертати, масштабувати, переміщувати, та нахиляти елемент за допомогою «трансформуючих функцій»
transform: transform-functions

Назва	Опис
matrix()	Перетворення
translate()	Зсув
scale()	Масштабування
rotate()	Обертання
skew()	Нахил

11 of 25

Властивість «transform»

12 of 25

Приклад використання «Transform»

13 of 25

Властивість «opacity»

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

Набуває значення в діапазоні від 0 (повністю прозорий) до 1 (непрозорий). �

14 of 25

Плавне мерехтіння (зміна прозорості – використання властивості «opacity»)

Звичайна анімація 5 секунд НЕСКІНЧЕННА. � П’ять станів стилю анімації (0 - 25 – 50 – 75 – 100)

Прозорість 0 – 0.4 – 0.8 – 0.4 – 0

15 of 25

Короткий запис

animation: (1. animation-name — назва)�(2. animation-duration — тривалість)�(3. animation-timing-function динаміка руху)�(4. animation-delay — пауза перед стартом)�(5. animation-iteration-count — кількість виконань)�(6. animation-direction — напрямок). �

У наведеному прикладі:

Звичайна анімація 5 секунд НЕСКІНЧЕННА.

16 of 25

Цікаво: анімація меню «гамбургер»

17 of 25

Цікаво: анімація завантаження сторінки

18 of 25

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

19 of 25

Animate.css

Фундаментальна бібліотека анімацій, сумісних з усіма браузерами Містить безліч видів анімації— від класичних підскакувань до�останніх новинок та унікальних ефектів — здатна задовольнити потреби практично будь-якого проекту. �

20 of 25

Anime.js�

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

21 of 25

CSS-Animate �

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

22 of 25

Завдання для самостійного виконання (на вибір)

Перегляньте наступні відеоуроки

https://www.youtube.com/watch?v=MLfAW55_4cY

https://www.youtube.com/watch?v=w0V4HAYYCbU

Керуючись інструкціями, створіть анімацію кнопок меню.

23 of 25

Аналізуємо. Обговорюємо

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

24 of 25

Домашнє завдання

Перегляньте приклади анімації за посиланням https://www.mockplus.com/blog/post/css-animation-examples.

Класифікуйте приклади за видами анімації.

Візуалізуйте створену класифікацію засобами табличного процесора.

Результат надішліть на електронну адресу вчителя

1 of 25