17. Keyframes

Веброзробка сайтів не така складна, як здається, якщо розібратися в текстовому програмуванні HTML/CSS. У цій статті поговоримо про проміжні кроки у послідовності анімації CSS. Керує цим правилом @keyframes і дає більший контроль над проміжними етапами анімаційної послідовності, ніж переходи.

Веброзробка сайтів: синтаксис

@keyframes slidein {

from {
margin-left 100%;
width 300%;
}

50% {
margin-left 50%;
width 200%;
}

to {
margin-left 0%;
width 100%;
}
}

Значення

JavaScript може отримати доступ до правил @keyframes за допомогою інтерфейсу об’єктної моделі CSS CSSKeyframesRule.

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

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

Справжні списки ключових кадрів

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

Властивості, які не можуть бути анімовані в правилах @keyframes, ігноруються, але властивості, що підтримуються, все одно будуть анімовані.

Веб розробка сайтів є актуальним напрямком на ринку руди, тому фахівці, що створюють веб продукти мають попит.

Обробка дублікатів

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

Якщо зсув часу анімації дублюється, використовується останній ключовий кадр у правилі @keyframes для цього відсотка. Всередині правила @keyframes немає каскадування, якщо кілька ключових кадрів визначають однакові відсоткові значення.

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

Властивості, які не вказані в кожному ключовому кадрі, по можливості інтерполюються – властивості, які неможливо інтерполювати видаляються з анімації.

Наприклад:

@keyframes identifier {
0% {
top 0;
left 0;
}
30% {
top 50px;
}
68%,
72% {
left 50px;
}
100% {
top 100px;
left 100%;
}
}
Тут властивість top анімує, використовуючи 0%, 30% та 100% ключові кадри, а анімації для left використовують 0%, 68% та 100% ключові кадри.

Коли ключовий кадр визначається кілька разів

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

Наприклад:

@keyframes identifier {
0% {
top 0;
}
50% {
top 30px;
left 20px;
}
50% {
top 10px;
}
100% {
top 0;
}
}
У цьому прикладі на 50% ключовому кадрі використовується значення top 10px, а всі інші значення цього ключового кадру ігноруються.

Каскадні ключові кадри підтримуються з Firefox 14. У наведеному вище прикладі це означає, що в 50% ключовому кадрі буде додано значення left 20px. Це ще не визначено у специфікації, але це обговорюється.

Курси веброзробка сайтів – практичні заняття програмування, на яких учні створюють різноманітні маленькі ігри та анімації.

!important у ключових кадрах

Оголошення у ключових кадрах із модифікатором !important ігноруються.

Наприклад:

@keyframes important1 {
from {
margin-top 50px;
}
50% {
margin-top 150px !important;
} ignored
to {
margin-top 100px;
}
}

@keyframes important2 {
from {
margin-top 50px;
margin-bottom 100px;
}
to {
margin-top 150px !important; ignored
margin-bottom 50px;
}
}

Підтримка браузерами

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