CSS-анімації

За допомогою CSS-анімації можна створювати ефекти, які будуть автоматично запускатися і повторюватися в заданому проміжку часу.

Ми будемо оперувати такими властивостями:
1.Властивості анімації – описують дії анімації.
2.Ключові кадри - keyframes – описують стилі елемента анімації в різні проміжки часу.


1.Властивості анімації Є вісім властивостей animation (в алфавітному порядку):
- animation-delay – задає затримку перед початком анімації, в секундах
-animation-direction – вказує на те, чи повинна анімація відтворюватися в зворотному або чергованому циклах (reverse або alternate)
-animation-duration – визначає те, скільки секунд або мілісекунд потрібно анімації для завершення одного циклу
-animation-fill-mode – стиль для елемента, коли анімація не відтворюється. Наприклад, коли анімація завершилася або у неї задана затримка
-animation-iteration-count – задає кількість разів, яку має відтворюватися анімація (infinite – для нескінченної кількості разів)
-animation-name – визначає ім’я @keyframes анімації
-animation-play-state – вказує на те, чи запущена анімація або припинена (running або paused)
-animation-timing-function – визначає криву швидкості анімації

Приклад запису властивості анімації:
div {animation: nazva-animaciyi 1.5s ease-out 0s alternate infinite none running;}
Властивості анімації в порядку їх виконання, без розділових знаків.


2.Ключові кадри - keyframes Зразок синтаксису ключових кадрів @keyframes виглядає так:

@keyframes [назва анімації] {
  0% {/* початковий кадр */
    [властивість CSS]: [значення властивості];
  }
  100% {/* фінальний кадр */
    [властивість CSS]: [значення властивості];
  }
}

Одному елементу можна присвоїти кілька різних ключових кадрів, тоді між властивостями ставиться кома.
3.Тривалість анімації: animation-duration
Властивість animation-duration визначає тривалість одного циклу анімації. Задається в секундах s або мілісекундах ms.
Завдання 1.Скопіюйте даний нижче код до свого файлу. Придивіться скільки тут кадрів? Де опис кадрів? Де опис анімації?

.puls_kolo{
  background-color: red;
  border-radius: 50%;
  height: 250px;
  width: 250px;
  margin: 50px;
  animation: pulsuvannya 2s ease infinite;
}

 @keyframes pulsuvannya {

  0% {
    transform: scale (1);
  } 

  50% {
    transform: scale (1.3);
  }

  100% {
    transform: scale (1);
  }

}

Завдання 2.Змініть коло на серце. Опис CSS візьміть із Довідника фігур
Змініть анімацію на поворот.

---

Завдання 3. Нафантазуйте щось таке :)

---

---

4.Тимчасова функція: animation-timing-function
Властивість animation-timing-function описує, як буде розвиватися анімація між кожною парою ключових кадрів.

значення:
linear Лінійна функція, анімація відбувається рівномірно протягом усього часу, без коливань в швидкості.
функції Безьє ease анімація починається повільно, розганяється швидко і сповільнюється в кінці. Відповідає cubic-bezier (0.25,0.1,0.25,1).
ease-in анімація починається повільно, а потім плавно прискорюється в кінці. Відповідає cubic-bezier (0.42,0,1,1).
ease-out Анімація починається швидко і плавно сповільнюється в кінці. Відповідає cubic-bezier (0,0,0.58,1).
ease-in-out Анімація повільно починається і повільно закінчується. Відповідає cubic-bezier (0.42,0,0.58,1).
cubic-bezier (x1, y1, x2, y2) Дозволяє вручну встановити значення від 0 до 1.

step-start Задає покрокову анімацію, розбиваючи анімацію на відрізки, зміни відбуваються на початку кожного кроку. Обчислюється в steps (1, start).
step-end Покрокова анімація, зміни відбуваються в кінці кожного кроку. Обчислюється в steps (1, end).
steps (кількість кроків, положення кроку) Ступенева тимчасова функція, яка приймає два параметри. Перший параметр вказує кількість інтервалів в функції. Це повинно бути позитивне ціле число більше 0, якщо другим параметром не є jump-none - в цьому випадку воно повинно бути позитивним цілим числом більше 1. Другий параметр, який є необов'язковим, вказує позицію кроку - момент, в якому починається анімація, використовуючи одне з наступних значень:

jump-start - перший крок відбувається при значенні 0
jump-end - останній крок відбувається при значенні 1
jump-none - всі кроки відбуваються в межах діапазону (0, 1)
jump-both - перший крок відбувається при значенні 0, останній - при значенні 1
start - поводиться як jump-start
end - поводиться як jump-end
Зі значенням start анімація починається на початку кожного кроку, зі значенням end - в кінці кожного кроку з затримкою. Затримка обчислюється як результат ділення часу анімації на кількість кроків. Якщо другий параметр не вказано, використовується значення за замовчуванням end.

initial Встановлює значення властивості в значення за замовчуванням.
inherit Успадковує значення властивості від батьківського елемента. синтаксис

Завдання 4. Використайте вказані види анімації до блоку з текстом. За допомогою які створюють цікаві ефекти, наприклад, друкується текст або індикатор завантаження.

animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;
animation-timing-function: cubic-bezier (0.1, 0.7, 1.0, 0.1);
animation-timing-function: steps (4, end);
animation-timing-function: ease, step-start, cubic-bezier (0.1, 0.7, 1.0, 0.1);
animation-timing-function: initial;
animation-timing-function: inherit;