📑 Анімації

За допомогою стилів можна задавати не лише статичний вигляд сторінки та її елементів, але й їх динамічну зміну.

Для початку, ознайомимось з можливостями побудови графічних фігур за допомогою CSS: 

https://easycss.top/elements/geometricheskie-figury-na-chistom-css/ 

Далі, можемо задавати анімацію для цих фігур.

Так, можна задати стандартне оформлення для певного блоку (наприклад, div), а також його оформлення у момент наведення вказівника миші (hover) на цей блок. Можна переглянути html-код, опис стилів та результат застосування такого ефекту:

 

У цьому прикладі стандартно блок div має ширину та висоту 200 пікселів, а при наведенні мишки (подія hover), ширина змінюється на 300 пікселів протягом 2 секунд. Якщо додати властивість transition: 2s до початкового стилю, то повернення до 200 пікселів теж відбуватиметься не миттєво, а протягом вказаного часу.  

Для гнучкого керування процесом анімації можна задавати визначення окремих кадрів, keyframes. Для такої анімації необхідно вказувати ім'я  – для використання при виклику, а також стильові властивості у різні моменти часу:

• <відсоток>  значення властивостей у заданий момент часу (у відсотках);
  
• <властивість> - анімована властивість;
  
• <значення> - значення в момент, описаний селектором кадру.
  

Так, у наступному прикладі блок div початково має червоний колір тла. Протягом 4 секунд відбувається анімація example з такими етапами: колір заливки змінюється з червоного до жовтого, до синього, до зеленого. У кінці відбувається повернення до червоного кольору, визначеного для блоку div.

Можна також задавати зміну позиції в анімації; для цього у початкових властивостях слід вказати відносне позиціювання, а у кадрах анімації - задати параметри розташування об'єкту відносно верху та лівої межі сторінки. 

У наведеному прикладі також змінений радіус фігури (border-radius) - таким чином можна отримати коло, чи еліпс. Цей атрибут може визначати форму фігури за параметрами скруглення окремих кутів, наприклад border-radius:50% 0 0 0; означає, що скруглений буде лише 1 верхній лівий кут.

Серед анімованих властивостей можна виділити трансформацію transform, яка може набувати значень matrix(n,n,n,n,n,n) - перетворення, translate(x,y) - переміщення, scale(x,y) - масштаб, rotate(кут) - поворот, skew(кут-х,кут-у) - нахиляння, perspective - перспектива

Серед додаткових параметрів анімації можна виділити наступні: 

animation-delay: 2s; - затримка початку анімації

animation-iteration-count: 3; - кількість повторів анімації. можливе значення  infinite; - безконечне повторення

animation-direction: reverse; - напрям анімації (повторити у зворотньому порядку). можливе значення alternate; - повторювати в прямому та зворотньому порядку

animation-timing-function: linear; - прискорення анімації (відсутнє). можливі значення:  ease;  ease-in;  ease-out; ease-in-out;

Варто зазначити, що існує скорочений запис стильових властивостей.

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

можна записати:

div {
  animation: example 5s linear 2s infinite alternate;
}

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

• Chrome & Safari: -webkit-
  
• Firefox: -moz-
  
• Opera: -o-
  
• Internet Explorer: -ms-
  

div {
-webkit-animation: example 5s linear 2s infinite alternate;
-moz-animation: example 5s linear 2s infinite alternate;
-o-animation: example 5s linear 2s infinite alternate;
-ms-animation: example 5s linear 2s infinite alternate;
animation: example 5s linear 2s infinite alternate;
}