CSS Animations

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

Довідка

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

CSS @-правила

@keyframes

Посібники

Виявлення підтримки 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!

Desktop
Mobile

Властивість	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 можуть запускати анімації на підставі дій користувача.