|
Назва
властивості |
Опис |
Які
значення може приймати |
|
animation-name: |
Задає ім’я для анімації @keyframes через правило, яке описує анімаційні
ключові кадри |
В нашому випадку spin |
|
animation-duration: |
Визначає тривалість циклу анімації |
Вказується
в секундах, від’ ємних значень не існує, в нашому випадку 4s (чотири секунди) |
|
animation-timing-function: |
Задає конфігурацію таймінгу анімації; інакше кажучи, як саме анімація
робитиме прохід через ключові кадри |
Linear Лінійна функція, анімація відбувається рівномірно
протягом усього часу, без коливань в швидкості. ease, анімація починається повільно, швидко розганяється і
сповільнюється в кінці. ease-in Анімація починається повільно, а потім плавно
прискорюється в кінці. ease-out Анімація починається швидко і плавно сповільнюється в
кінці. ease-in-out Анімація повільно починається і
повільно закінчується. |
|
animation-iteration-count |
Визначає кількість повторів анімації; |
Вказується ціле число infіnite нескінченне повторювання |
|
animation-direction |
Визначає зміну напрямку анімації та його чергування залежно від
кількості проходів анімації |
normal Всі повтори анімації відтворюються так, як зазначено.
Значення за замовчуванням. reverse Всі повтори анімації відтворюються в зворотному напрямку
від того, як вони були визначені. alternate Кожне непарне повторення циклу
анімації відтворюються в визначенному напрямку, кожне парне повторення
відтворюється в зворотному напрямку. alternate-reverse Кожен непарний повтор циклу
анімації відтворюються в зворотному напрямку, кожне парне повторення
відтворюється в визначеному напрямку. |
1.
Створіть
теку page_training.
2.
Створіть
редактором коду сторінку index.html, в якій оголосіть
два блоки <div> з іменами класів «one» та «two». Збережіть у теці page_training.
<!DOCTYPE html>
<html>
<head>
<title>
</title>
<link rel=”stylesheet" type=”text/ess" href=”style. css">
<meta
charset="UTF-8">
</head>
<body>
<div
class="one">
<div
class="two"></div>
</div>
</body>
</html>
3.
Створіть
у тій же теці таблицю стилів style.css пропишіть
властивості класів «one» та «two». Збережіть і
перегляньте результат.
.one {
height: ЗООрх;
width: ЗООрх;
background: #820202;
transition-duration:
.5s;
transform: rotate (0);
}
.two{
width: lOOpx;
height: lOOpx;
background: grey;
}
4.
Додайте
до таблиці опис класу «one» при наведенні миші. Збережіть і перегляньте
результат.
.one:hover{
transform: rotate
(90deg);
transition-duration: 1s;
background: blue;
border-radius: 50%;
}
ЗАВДАННЯ: створити найпростіші анімаційні ефекти на сторінках
сайту.
І. Внесення змін у розроблений під час попередніх
практичних завдань.
1.
Відкрийте
редактором коду головну сторінку (index.html). У блоці хедеру додайте
блок div з ім’ям класу «square»
<div
class="square"></div>
2.
Запишіть
у таблиці стилів властивості цього класу та налаштуйте анімацію
.
square{
width: 90px;
height: 90px;
margin: 30px auto;
background-color: #123456;
animation-name: spin;
animation-duration:
4s;
animation-timing-function:
linear;
animation-iteration-count:
infinite;
animation-direction:
alternate;
}
@keyframes
spin{
0% {transform:
rotate(Odeg); }
25% {background-color:
yellow; }
100% {transform:
rotate(360deg); }
}
3.
Збережіть
зміни. Відкрийте сторінку браузером.
4.
Спробуйте
внести свої корективи в запропоновану анімацію: поміняти animation-direction, animation-iteration-count тощо. Як це відобразилося на відтворенні анімації?
ІІ. Налаштування анімації фотографій у галереї – при наведенні миші фотографії збільшуються
1.
Відкрийте редактором коду файл style.css. В клас inline-img img додайте наступний код
transform:
scale(0.95);
transition:
.3s;
max-width:
35%;
а також створіть
новий псевдоклас
inline-img
img: hover{
transform:
scale(l);
}
2.
Збережіть
зміни. Відкрийте в браузері, перегляньте результат.
3.
Поміркуйте,
що необхідно змінити у таблиці стилів, для збільшення розміру фотографій на
інших сторінках.
Зробіть висновок про результати роботи. Для яких елементів
можна використовувати анімаційні ефекти.