CSS Анімації
CSS Анімації
CSS дозволяє зробити анімацію HTML-елементів без використання JavaScript або Flash!
В цьому розділі ви дізнаєтесь про наступні властивості:
@keyframesanimation-nameanimation-durationanimation-delayanimation-iteration-countanimation-directionanimation-timing-functionanimation-fill-modeanimation
Браузерна підтримка анімації
Числа в таблиці вказують першу версію браузера, яка повністю підтримує властивість.
| Властивість | |||||
|---|---|---|---|---|---|
| @keyframes | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-name | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-duration | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-delay | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-iteration-count | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-direction | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-timing-function | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation-fill-mode | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
| animation | 43.0 | 10.0 | 16.0 | 9.0 | 30.0 |
Що таке CSS анімація?
Анімація дозволяє елементу поступово переходити від одного стилю до іншого.
Ви можете змінити стільки CSS властивостей, скільки хочете, і стільки разів, скільки хочете.
Щоб використовувати CSS-анімацію, спочатку необхідно вказати кілька ключових кадрів для анімації.
Ключові кадри містять стилі, які елемент буде мати у визначений час.
Правило @keyframes (ключові кадри)
Коли ви задаєте CSS стилі всередині правила @keyframes анімація поступово зміниться з поточного стилю на новий стиль у визначені моменти часу.
Щоб анімація працювала, ви повинні прив’язати її до елементу.
В наступному прикладі анімація "example" зв’язується з елементом <div>. Анімація буде тривати 4 секунди та поступово змінить колір фону елемента <div> з червоного - "red" на жовтий - "yellow":
Приклад
/* Код анімації */
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
/* Елемент, до якого застосовується анімація */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Спробуйте самі »
Примітка: Властивість animation-duration властивість визначає, скільки часу анімація має зайняти для завершення. Якщо властивість animation-duration не вказано, анімація не буде виконуватись, оскільки значення за замовчуванням дорівнює 0s (0 секунд).
В наведеному вище прикладі ми вказали, коли стиль зміниться, використовуючи ключові слова "від" і "до" (що відповідає 0% (початок) і 100% (завершення)).
Також можна використовувати проценти. Використовуючи проценти, ви можете додавати стільки стилів, скільки хочете.
В наступному прикладі буде змінено колір фону елемента <div>, коли анімація завершена на 25%, завершена на 50% и снова, коли анімація завершена на 100%:
Приклад
/* Код анімації */
@keyframes example {
0% {background-color: red;}
25% {background-color: yellow;}
50% {background-color: blue;}
100% {background-color: green;}
}
/* Елемент, до якого застосовується анімація */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Спробуйте самі »
Наступний приклад змінить колір фону і положення елемента <div>, коли анімація завершена на 25%, завершена на 50%, і знову, коли анімація завершена на 100%:
Приклад
/* Код анімації */
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px; top:0px;}
50% {background-color:blue; left:200px; top:200px;}
75% {background-color:green; left:0px; top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
/* Елемент, до якого застосовується анімація */
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
}
Спробуйте самі »
Затримка анімації
Властивість animation-delay вказує затримку початку анімації.
В наступному прикладі перед запуском анімація затримується на 2 секунди:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: 2s;
}
Спробуйте самі »
Негативні значення також допускаються. При використанні негативних значень анімація почнеться так, як би вона вже відтворювалась протягом N секунд.
В наступному прикладі анімація запуститься так, як би вона вже відтворювалась протягом 2 секунд:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-delay: -2s;
}
Спробуйте самі »
Встановіть, скільки разів анімація має запускатися
Властивість animation-iteration-count вказує, скільки разів анімація має запускатися.
В наступному прикладі анімація буде запущена 3 рази до її зупинки:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 3;
}
Спробуйте самі »
В наступному прикладі використовується значення "infinite" (безкінечно), щоб анімація тривала постійно:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: infinite;
}
Спробуйте самі »
Запустіть анімацію в зворотньому напрямку або альтернативних циклах
Властивість animation-direction вказує, чи слід відтворювати анімацію вперед, назад або в циклах, що змінюються.
Властивість animation-direction може мати наступні значення:
normal- Анімація відтворюється як завжди (вперед). Це за замовчуваннямreverse- Анімація відтворюється в зворотньому напрямку (назад)alternate- Спочатку анімація відтворюється вперед, потім назадalternate-reverse- Спочатку анімація відтворюється в зворотньому напрямку, потім вперед
В наступному прикладі анімація буде запущена в зворотньому напрямку (назад):
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-direction: reverse;
}
Спробуйте самі »
В наступному прикладі використовується значення "alternate", щоб спочатку запустити анімацію вперед, а потім назад:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate;
}
Спробуйте самі »
В наступному прикладі використовується значення "alternate-reverse", щоб спочатку запустити анімацію назад, а потім вперед:
Приклад
div {
width: 100px;
height: 100px;
position: relative;
background-color: red;
animation-name: example;
animation-duration: 4s;
animation-iteration-count: 2;
animation-direction: alternate-reverse;
}
Спробуйте самі »
Вкажіть криву швидкості анімації
Властивість animation-timing-function задає криву швидкості анімації.
Властивість animation-timer-function може мати наступні значення:
ease- Визначає анімацію з повільним початком, потім швидким, а потім повільним завершенням (за замовчуванням)linear- Визначає анімацію з однаковою швидкістю від початку до кінцяease-in- Визначає анімацію з повільним початкомease-out- Визначає анімацію з повільним закінченнямease-in-out- Визначає анімацію з повільним початком та закінченнямcubic-bezier(n,n,n,n)- Дозволяє визначити свої власні значення в функції кубічного Без’є
В наступному прикладі показані деякі з різних кривих швидкості, які можна використовувати:
Приклад
#div1 {animation-timing-function: linear;}
#div2 {animation-timing-function: ease;}
#div3 {animation-timing-function: ease-in;}
#div4 {animation-timing-function: ease-out;}
#div5 {animation-timing-function: ease-in-out;}
Спробуйте самі »
Вкажіть режим заповнення для анімації
CSS-анімація не впливає на елемент перед відтворенням першого ключового кадру або після відтворення останнього ключового кадру. Властивість animation-fill-mode може перевизначити цю поведінку.
Властивість animation-fill-mode визначає стиль для цільового елемента, коли анімація не відтворюється (до її запуску, після її завершення або в обох випадках).
Властивість animation-fill-mode може мати наступні значення:
none- Значення за замовчуванням. Анімація не буде застосовувати які-небудь стилі до елементу до або після його виконанняforwards- Елемент збереже значення стилю, встановлені останнім ключовим кадром - залежить від animation-direction (направлення анімації) та animation-iteration-count (ітеративного підрахунку анімації)backwards- Елемент отримає значення стилю, задані першим ключовим кадром - залежить від animation-direction (направлення анімації), та збереже його протягом періоду animation-delay (затримки анімації)both- Анімація буде слідувати правилам як вперед, так і назад, розширюючи властивості анімації в обох напрямках.
В наступному прикладі елемент <div> зберігає значення стилю з останнього ключового кадра після закінчення анімації:
Приклад
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-fill-mode: forwards;
}
Спробуйте самі »
В наступному прикладі елемент <div> отримує значення стилю, встановлені першим ключовим кадром, до початку анімації (протягом періоду затримки анімації):
Приклад
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: backwards;
}
Спробуйте самі »
В наступному прикладі елемент <div> отримує значення стилю, встановлені першим ключовим кадром до початку анімації, і зберігає значення стилю з останнього ключового кадру після завершення анімації:
Приклад
div {
width: 100px;
height: 100px;
background: red;
position: relative;
animation-name: example;
animation-duration: 3s;
animation-delay: 2s;
animation-fill-mode: both;
}
Спробуйте самі »
Скорочені властивості анімації
В наведеному нижче прикладі використовуються шість властивостей анімації:
Приклад
div {
animation-name: example;
animation-duration: 5s;
animation-timing-function: linear;
animation-delay: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
}
Спробуйте самі »
Той же ефект анімації, що і вище, може бути досягнутий за допомогою скороченої властивості animation:
Перевірте себе за допомогою вправ!
CSS Властивості анімації
В наступній таблиці перераховані правила @keyframes та всі властивості CSS-анімації:
| Властивість | Опис |
|---|---|
| @keyframes | Визначає код анімації |
| animation | Скорочена властивість для встановлення всіх властивостей анімації |
| animation-delay | Визначає затримку початку анімації |
| animation-direction | Визначає, чи повинна анімація відтворюватись вперед, назад або почергово |
| animation-duration | Визначає, скільки часу анімація повинна зайняти для завершення одного циклу |
| animation-fill-mode | Визначає стиль для елемента, коли анімація не відтворюється (до її початку, після її завершення або і того, й іншого) |
| animation-iteration-count | Визначає, скільки разів анімація має відтворюватись |
| animation-name | Визначає ім’я анімації @keyframes |
| animation-play-state | Визначає, чи запущена анімація або призупинена |
| animation-timing-function | Визначає криву швидкості анімації |
