Ім'я файлу: Вебтехнології.Практична5 (1).pdf
Розширення: pdf
Розмір: 3114кб.
Дата: 09.11.2022
скачати
Пов'язані файли:
ref_7931_parta_ua.doc
тест люшера.docx

65
ПРАКТИЧНА РОБОТА №5
Тема: Анімація на CSS3.
Мета: Практично познайомитися із принципами та синтаксисом анімації
на вебсторінці з використанням CSS3.
Знати:
Основні команди, за допомогою яких можна на CSS3 анімацію
Вміти: Компонувати текстову або графічну інформацію для організації
анімаційних ефектів
Теоретичні відомості
CSS анімації роблять можливим анімацію переходів (transitions) з однієї
конфігурації CSS стилю до іншої. Анімації складаються з двох компонентів, а власне - стилю, котрий описує CSS анімацію та набір ключових кадрів
(keyframes), які задають початковий та кінцевий стан стилю анімації, а також є
можливим задання точок проміжного стану.
В CSS анімацій є три ключові переваги перед традиційними скриптовими техніками анімації:
•
Вони легкі у використанні для простих анімацій; ви можете створити їх навіть без знань JavaScript.
•
Анімації добре функціонують, навіть при помірному навантаженні на систему. Прості анімації на JavaScript можуть працювати не дуже добре (в разі, якщо вони не ідеально зроблені).
Рушій рендера може використовувати техніку пропуску кадрів та інші засоби для підтримки гладкої анімації.
•
Надаючи таким чином браузеру контроль над послідовністю анімації ви надаєте можливість браузеру оптимізувати свою роботу та ефективність,
наприклад, завдяки зупинці анімації у вкладках, які не є відкриті для перегляду.
Синтаксис
анімації
Щоб скористатися анімацією в своєму проекті, вам досить зробити дві
речі:
1. Створити саму анімацію.
2. Підключити її до елементу, який треба анімувати, і вказати необхідні
якості.
Анімація являє собою набір ключових кадрів, який міститься в css і
виглядає ось так:

66
@keyframes назва_анімації {
0% {
стан змінних параметрів
}
100% {
стан змінних параметрів
}
}
Анімацію необхідно підключити до елемента, який будемо анімувати. Для цього до об’єкту додаємо характеристику animation:
Селектор {animation: назва_анімації час_анімації зацикленість модель_анімації;}
Ключові кадри
Ключ ові
кадри використовуються для вказ у
в ання значень властивостей анімації в різних точках анімації. Ключові кадри визначають поведінку одного циклу анімації; анімація може повторюватися нуль або більше разів. Ключові
кадри вказуються за допомогою правила @keyframes
Створення анімації починається з установки ключових кадрів правила
@keyframes. Кадри визначають, які властивості на якому етапі будуть анімовані. Кожен кадр може включати один або більше блоків оголошення з одного або більше пар властивостей і значень. Правило @keyframes містить
ім'я анімації елемента, яке пов'язує правило і блок оголошення елемента.
@keyframes shadow {
from {text-shadow: 0 0 3px black;}
50% {text-shadow: 0 0 30px black;}
to {text-shadow: 0 0 3px black;}
}
Ключові кадри створюються за допомогою ключових слів from і to
(еквівалентні значенням 0% і 100%) або за допомогою процентних пунктів,
яких можна задавати скільки завгодно. Також можна комбінувати ключові слова
і процентні пункти. Якщо кадри мають однакові властивості і значення, їх можна об'єднати в одне оголошення:
@keyframes move {
from, to {
top: 0;
left: 0;

67
}
25%,
75% {top: 100%;}
50% {top: 50%;}
}
Якщо 0% або 100% кадри не вказані, то браузер користувача створює їх,
використовуючи обчислювані (спочатку задані) значення анімованої
властивості.
Якщо кілька правил @keyframes визначені з одним і тим же ім'ям, то спрацює останн
є
в порядку документа, а всі попередні проігнору ються
Після оголошення правила @keyframes, ми можемо посилатися на нього у властивості animation:
h1 {
font-size: 3.5em;
color: darkmagenta;
animation: shadow 2s infinite ease-in-out;
}
Конфігурування анімації
Щоб створити CSS-анімаційну послідовність, ви стилізуєте анімований елемент animation властивістю чи її підвластивостями. Це дозволяє вам коригувати таймінг, тривалість та інші деталі анімації згідно з вашими потребами. Це конфігурує актуальний вигляд анімації, яка здійснюється проходом через @keyframes правила,.
Підвластивостями властивості animation є:
Таблиця 5.1 - Властивості анімації в CSS
animation-delay
Змінює час затримки між часом з моменту завантаження елемента та початком анімаційної послідовності.
animation-direction
Визначає зміну напрямку анімації та його чергування в залежності від кількості проходів анімації, а також може задавати повернення в початковий стан і починати прохід заново.
animation-duration
Визначає тривалість циклу анімації.
animation-iteration-count
Визначає кількість проходів (повторів) анімації; ви можете також обрати значення infinite для нескінченного повтору анімації.
animation-name
Задає ім'я для анімації @keyframes через at-правило, яке описує
анімаційні ключові кадри.
animation-play-state
Дозволяє вам призупиняти та відновлювати анімацію.
animation-timing-function Задає конфігурацію таймінгу анімації; інакше кажучи, як саме буде анімація робити прохід через ключові кадри, це можливо

68
завдяки кривим прискорення.
animation-fill-mode
Визначає, які значення будуть застосовані для анімації перед початком та після її закінчення.
Всі ці правила анімації можна застосовувати окремо. Проте, можна використати скорочені правила. animation скорочення є вигідним для економії
місця. От, для прикладу, правила анімації, які ми вже використали в статті:
p {
animation-duration: 3s;
animation-name: slidein;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Їх можна замінити ось таким чином p {
animation: 3s infinite alternate slideIn;
}
Приклад анімації
Приклад реальної анімації спробуємо показати на реалізації орбіти
М
ісяця довкола Землі. Для цього створюємо початковий HTML-файл.