Анімація
Оновлено: 20.01.2023
Анімація
Властивості, що задають рух елементів на веб-сторінці або анімаційний перехід з одного стану в інший.
-
@keyframes
@keyframes
Правило @keyframes встановлює ключові кадри під час анімації елемента. Ключовий кадр - це властивості елемента (прозорість, колір, положення та ін.), які мають застосовуватися до елемента в заданий момент часу. Таким чином, анімація являє собою плавний перехід стильових властивостей від одного ключового кадру до іншого. Обчислення проміжних значень між такими кадрами бере на себе браузер.
-
animation-delay
animation-delay
Властивість animation-delay встановлює час очікування перед запуском циклу анімації. Значення 0s або 0ms запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але може призвести до зміни вигляду початку анімації.
-
animation-duration
animation-duration
Задає час у секундах або мілісекундах, скільки має тривати один цикл анімації. За замовчуванням значення дорівнює 0s, це означає, що жодної анімації немає.
-
animation-fill-mode
animation-fill-mode
Визначає, які стилі мають застосовуватися до елемента, коли анімація не програється. Наприклад, після її завершення або під час зупинки. За замовчуванням, у момент закінчення анімації стиль елемента повертається до початкового, властивість animation-fill-mode дає змогу змінити цю поведінку і зробити так, щоб стиль елемента залишався як в останнього ключового кадру.
-
animation-iteration-count
animation-iteration-count
Властивість визначає, скільки разів програвати цикл анімації до її зупинки.
-
animation-name
animation-name
Встановлює одну або кілька анімацій, які застосовуються до елемента. Являє собою ім'я, пов'язане з правилом @keyframes, воно зі свого боку задає послідовність руху.
-
animation-play-state
animation-play-state
Властивість визначає, програвати анімацію або поставити її на паузу. У разі продовження встановленої на паузі анімації вона починається з того моменту, де була зупинена.
-
animation-timing-function
animation-timing-function
Встановлює, згідно з якою функцією часу має відбуватися анімація кожного циклу між ключовими кадрами. Вона являє собою математичну функцію, що показує, як швидко за часом змінюється значення властивості. Початкова точка має координати 0.0, 0.0, кінцева - 1.0, 1.0, водночас функція за віссю ординат може перевищувати ці значення в більший або менший бік (рис. 1).
-
transition
transition
Універсальна властивість, яка дає змогу одночасно задати значення transition-property, transition-duration, transition-timing-function і transition-delay. Встановлює ефект переходу між двома станами елемента, вони можуть бути визначені за допомогою псевдокласу :hover або :active, а також динамічно через JavaScript.
-
transition-delay
transition-delay
Властивість transition-delay встановлює час очікування перед запуском ефекту переходу. Значення 0s запускає анімацію відразу ж. Негативне значення також вмикає анімацію без затримок, але може призвести до зміни вигляду початку анімації.
-
transition-duration
transition-duration
Задає час у секундах або мілісекундах, скільки має тривати анімація переходу до її завершення. За замовчуванням значення дорівнює 0s, це означає, що жодної анімації немає, перехід відбувається миттєво.
-
transition-property
transition-property
Встановлює ім'я стильової властивості, значення якої відстежуватиметься для створення ефекту переходу.
-
transition-timing-function
transition-timing-function
Встановлює, наскільки швидко має змінюватися значення стильової властивості, для якої застосовується ефект переходу.