CSS-анімації - це модуль CSS, який дозволяє вам змінювати значення CSS-правил впродовж певного часу, використовуючи ключові кадри (keyframes). Поведінка цих анімацій може контролюватися шляхом встановлення їх функцій синхронізації, тривалості, числа повторів, та інших атрибутів.
Довідка
CSS Властивості
CSS @-правила
Посібники
- Виявлення підтримки CSS-анімації
- Описує техніку виявлення підтримки браузером CSS-анімації.
- Використання CSS анімацій
- Покроковий підручник про те, як створити анімацію засобами CSS. Дана стаття описує кожне відповідне CSS властивість і at-правило, та пояснює, як вони взаємодіють між собою.
- Підказки і хитрощі для CSS анімацій
- Підказки і хитрощі, які допоможуть вам досягти якнайкращих результатів у CSS-анімаціях. В даний момент описує техніку, що дозволяє програти спочатку уже запущену анімацію (API не підтримує напряму такий функціонал).
Специфікації
| Специфікація | Статус | Коментар |
|---|---|---|
| CSS Animations | Working Draft | Початкове визначення. |
Сумісність із браузерами
We're converting our compatibility data into a machine-readable JSON format.
This compatibility table still uses the old format,
because we haven't yet converted the data it contains.
Find out how you can help!
| Властивість | Chrome | Edge | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|---|
| Базова підтримка | (Yes)-webkit 43.0 |
(Yes) | 5.0 (5.0)-moz 16.0 (16.0) |
10 | 12-o 12.10[2] |
4.0-webkit |
| Властивість | Android | Edge | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|---|
| Basic support | 2.1 -webkit [1] 4.0 -webkit |
(Yes) | 5.0 (5.0)-moz 16.0 (16.0) |
? | ? | (Yes)-webkit |
[1] Часткова підтримка: властивість animation-fill-mode не підтримується в Android браузері до версії 2.3.
[2] Ознайомтесь із release notes to Opera 12.50.
Дивіться також
- Подібно до CSS-анімацій, CSS Transitions можуть запускати анімації на підставі дій користувача.