Урок 19.

Практична робота 8
Використання анімаційних ефектів на сторінках сайту

Увага! Під час роботи з комп'ютером

дотримуйтеся правил безпеки та
санітарно-гігієнічних норм.

Завдання: створити найпростіші анімаційні

ефекти на сторінках сайту.
Хід виконання
Примітка. Нагадаємо основні властивості
блоку анімації CSS
Назва Опис Які значення може приймати
властивості
animation- Задає ім’я для анімації В нашому випадку spin
name: @keyframes через
правило, яке описує
анімаційні ключові
кадри
animation- Визначає тривалість Вказується в секундах, від’ ємних
duration: циклу анімації значень не існує, в нашому
випадку 4s (чотири секунди)
animation- Задає конфігурацію Linear Лінійна функція, анімація
timing- таймінгу анімації; відбувається рівномірно протягом
function: інакше кажучи, як усього часу, без коливань в
саме анімація швидкості.
робитиме прохід через ease, анімація починається
ключові кадри повільно, швидко розганяється і
сповільнюється в кінці.
ease-in Анімація починається
повільно, а потім плавно
прискорюється в кінці.
ease-out Анімація починається
швидко і плавно сповільнюється в
кінці.
ease-in-out Анімація повільно
починається і повільно
закінчується.
animation- Визначає кількість Вказується ціле число
iteration- повторів анімації; infіnite нескінченне повторювання
count
animation- Визначає зміну normal Всі повтори анімації
direction напрямку анімації та відтворюються так, як зазначено.
його чергування Значення за замовчуванням.
 залежно від кількості reverse Всі повтори анімації
проходів анімації, відтворюються в зворотному
напрямку від того, як вони були
визначені.
alternate Кожне непарне
повторення циклу анімації
відтворюються в визначенному
напрямку, кожне парне
повторення відтворюється в
зворотному напрямку.
alternate-reverse Кожен непарний
повтор циклу анімації
відтворюються в зворотному
напрямку, кожне парне
повторення відтворюється в
визначеному напрямку.
I. Тренувальна вправа
1. Створіть теку page_training.
2. Створіть редактором коду сторінку index.html, в якій оголосіть два блоки
<div> з іменами класів «one» та «two» (див. рис.1.) Збережіть у теці
page_training.

Рис.1.
3. Створіть у тій же теці таблицю стилів style.css пропишіть властивості
класів «one» та «two» (див. рис.2). Збережіть і перегляньте результат
4. Додайте до таблиці опис класу «one» при наведенні миші (див. рис.3).
Збережіть і перегляньте результат. Запишіть зміни, які ви спостерігаєте, у
зошит.
 Рис.2. Рис.3.
II. . Внесення змін у розроблений під час попередніх практичних сайт.
1. Відкрийте редактором коду головну сторінку (index.html). У блоці
хедеру додайте блок div з ім’ям класу «square»
<div class="square"></div>
2. Запишіть у таблиці стилів властивості цього класу та налаштуйте
анімацію (див. рис.4.)

Рис.4
3. Збережіть зміни. Відкрийте сторінку браузером.
4. Спробуйте внести свої корективи в запропоновану анімацію: поміняти
animation-direction, animation-iteration-count тощо. Як це
відобразилося на відтворенні анімації? Результат запишіть у зошит.
III. Налаштування анімації фотографій у галереї.
Задача – при наведенні миші фотографії збільшуються
 1. Відкрийте редактором коду файл “style.css”. В клас «inline-img img»
додайте наступний код (див. рис.5), а також створіть новий
псевдоклас (див. рис.6.)
2.

Рис.5. Рис.6.
Збережіть зміни. Відкрийте в браузері, перегляньте результат.
3. Що необхідно змінити у таблиці стилів, для збільшення розміру
фотографій на інших сторінках.
Зробіть висновок про результати роботи. Для яких елементів можна
використовувати анімаційні ефекти.

Домашнє завдання. У домашньому завданні попередньої практичної роботи

було створення галереї до сайту «7 Чудес України». Додайте анімаційні
ефекти. Надішліть архів з вашою роботою на поштову скриньку вчителя.