Keyframes, css довідник

CSS правило @keyframes дозволяє розробнику контролювати проміжні кроки в послідовності виконання CSS анімації за допомогою створення ключових кадрів (або шляхових точок) уздовж послідовності анімації, які досягаються в певні моменти часу виконання анімації. Це дає більше контролю над проміжними етапами послідовності анімації, ніж коли браузер обробляє всі автоматично.

Для використання ключових кадрів, створюється правило @keyframes з ім'ям, яке потім використовується в властивості animation (або animation-name) для додавання списку ключових кадрів в анімацію. Кожне правило @keyframes містить список стилів для селекторів ключових кадрів, кожен з яких складається з відсотка для анімації, при якому відбувається ключовий кадр, і блоку коду, що містить інформацію про стилі для цього ключового кадру.

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

Допустимі значення селекторів для ключових кадрів

Щоб список ключових кадрів був коректним, він повинен включати в себе мінімум два значення: 0% (або from) і 100% (або to), тобто починати і закінчувати цикл анімації. Якщо обидва ці значення не вказані, то все CSS правило вважається неприпустимим і не може бути використано для анімації.

Якщо правило містить властивості, які не можуть бути анімовані, вони будуть проігноровані, але підтримувані властивості, як і раніше будуть анімовані.

значення властивості

Обов'язковий параметр. Визначає назву анімації.

Обов'язковий параметр. Вказується у відсотках від тривалості анімації.

0-100%
from (те саме, що і 0%)
to (те саме, що і 100%)

Зауваження: Ви можете вказувати безліч селекторів ключового кадру в одній анімації.

Обов'язковий параметр. Один або більше допустимих властивостей CSS стилів.

Результат даного прикладу: