CSS. Урок 17 Анімація стилями

Анімація це плавне перетворення елементу з одного стану в іншій шляхом зміни значень властивостей. Зміни стилів в часі вказуються в ключевих кадрах - @keyframes. Властивості анімації: час, затримка, напрям руху, кількість повторень вказуться у властивості animation. Властивість animation додається до стилів елемента який передбачається анімувати. Властивості animation обов'язково треба присвоїти ім'я для зв'язку з @keyframes.

1. Кадрування @keyframes

@keyframes вставляється як окреме правило і вказує які значення властивостей елемента мають змінюватися в певний момент часу. Ці моменти часу прийнято позначати процентами %. Якщо в анімації всього два ключових момента: перший і останній кадр, то можна застосувати конструкцію from {стилі} to {стилі}.

В наступному прикладі, де animation пов'язаний з @keyframes через ім'я "aname" можна побачити як протягом 5 секунд плавно збільшується ширина елемента від 100 до 300 пікселів.

file css
div {
background-color:Aqua;
padding:10px;
border:blue 1px solid;
width:100px;
animation-name:aname;
animation-duration:4s;
 }
@keyframes aname {
from {width:100px;}
to {width:300px}
}

file html
<html>
<head>
<link rel="stylesheet" href="file.css">
</head>
<body>
<p>Для повтору анімації оновіть сторінку F5 </p>
<div> example 1 </div>
</body>
</html>

Якщо є необхідність створити більш складний сценарій зміни стилів, то можна розкласти весь час анімації на долі у % і визначити зміни на кожному маркері часу.

@keyframes animation_name {
0% {стиль}
25% {стиль}
50% {стиль}
75% {стиль}
100% {стиль}
}

1. Детально про animation

Властивість animation дає змогу настроїти анімацію з різними параметрами.

1.1 animation-name (обов'язковий)

Встановлює ім'я через яке буде здійснений зв'язок з @keyframes (кадрування). Ім`я має бути англійськими літерами, або цифрами без пропусків, але на початку має бути літера.

Приклад ідентифікаторів:

  • animation circle; правильно
  • animation 1abc; не допустимо
  • animation an178; правильно
  • animation move left; не допустимо
  • animation move_left; правильно

2.2 animation-duration (обов'язковий)

Встановлює час анімації в секундах.

Наприклад:
animation-duration:5s; Анімація триватиме 5 секунд.

2.3 animation-delay (необов'язковий)

Встановлює затримку анімації в секундах.

Наприклад:
animation-delay:2s; Анімація почнеться через 2 секунди.

2.4 animation-iteration-count (необов'язковий)

Встановлює кількість повторень

Наприклад:
animation-iteration-count:3; Анімація повтореться тричі.

2.5 animation-direction (необов'язковий)

  • animation-direction:normal - анімація програється звичайним чином від початку до кінця (вперед)
  • animation-direction:reverse - анімація програється навпаки від кінця (назад)
  • animation-direction:alternate - анімація програється вперед, а потім назад.
  • animation-direction:alternate-reverse - анімація програється назад, потім вперед.

2.6 animation-timing-function (необов'язковий)

Встановлює сценарій швидкості анімації

  • animation-timing-function:easy - повільний старт, швидкий перехід, повільне завершення.
  • animation-timing-function:linear - однакова швидкість переходу від початку до кінця.
  • animation-timing-function:easy-in - повільний старт
  • animation-timing-function:easy-out - в кінці уповільнюється
  • animation-timing-function:easy-in-out - Повільний на початку і в кінці. (відрізняється від easy)

2.7 animation-fill-mode (необов'язковий)

Ця властивість впливає на те, які значення стилів матиме елемент до або після анімації. За замовченням після анімації встановлюються початкові стилі.

  • animation-fill-mode:backward - по закінченні анімації встановлює стилі що були перед стартом анімації.
  • animation-fill-mode:forward - по завершенню анімації встановлює стилі останнього кадру.

2.8 Скорочений запис animation

В решті решт всі вищезгадані можна записати в одній властивості animation.

Наприклад:

animation name 4s 1s 3;

Важливо пам'ятати що animation-name i animation-duration мають бути обов'язково. Інщі властивості за необхідності.

Виконайте вправу в редакторі html

Створіть анімацію стилями як показано на відео. Для другої анімації необхідно використати ефекти transform (урок 16)