Keyframes, css, webreference

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

Найпростіший варіант, коли у нас є тільки два ключових кадру - вихідне і кінцеве стан (рис. 1).

Мал. 1. Переміщення елемента

В такому випадку @keyframes запишеться в наступному вигляді:

В даному випадку ми даємо нашому набору ім'я box. воно потім буде задіяно у властивості animation і визначаємо, що елемент буде змінювати значення властивості left від 0 до 300 пікселів. Замість ключових слів from і to можна використовувати, відповідно, 0% і 100%.

Ключові кадри не обов'язково повинні починатися з 0% і закінчуватися 100%. Анімація тоді буде відбуватися не відразу.

Синтаксис?

позначення

Вказує тип значення.

Значення повинні виводитися в зазначеному порядку.

<размер> <цвет>

Вказує, що треба вибрати тільки одне значення із запропонованих (A або B).

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

У таблиці браузерів застосовуються такі позначення.

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

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

Рекомендуємо

властивості CSS

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

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