Анимируемые свойства CSS

Анимации CSS и Переходы основаны на понятии анимируемых свойств, и все свойства CSS анимируемы, если не указано иное. Тип анимации каждого свойства определяет, как значения комбинируются — интерполируются, складываются или накапливаются — для этого свойства. Переходы используют только интерполяцию, в то время как анимации могут использовать все три метода комбинирования.

Примечание: Тип анимации для каждого свойства CSS указан в таблице «Формальное определение» (например, color).

Примечание: Метод интерполяции для каждого типа данных CSS описан в разделе «Интерполяция» (например, <length>).

Типы анимации

Существует четыре основных типа анимации, как определено в спецификации Web Animations:

Не анимируемые

Свойство не анимируется. Оно не обрабатывается при указании в ключевых кадрах анимации и не затрагивается переходами.

Примечание: Эффект анимации, нацеленный только на неанимируемые свойства, по-прежнему будет демонстрировать обычное поведение для эффекта анимации (например, вызывая событие animationstart).

Дискретные

Значения свойства не являются аддитивными, и интерполяция переключается со значения начала на значение конца в 50%. В частности, обозначая значение прогресса p,

Если p < 0.5, то V_result = V_start;
Если p ≥ 0.5, то V_result = V_end.

По вычисленному значению

Соответствующие отдельные компоненты вычисленных значений комбинируются с использованием указанной процедуры для типа этого значения. Если количество компонентов или типы соответствующих компонентов не совпадают, или если какое-либо значение компонента использует дискретную анимацию, и два соответствующих значения не совпадают, то значения свойства комбинируются как дискретные.

Повторяемый список

То же самое, что и по вычисленному значению, за исключением того, что если два списка имеют разное количество элементов, они сначала повторяются до наименьшего общего кратного числа элементов. Затем каждый элемент комбинируется по вычисленному значению. Если пару значений нельзя комбинировать или любое значение компонента использует дискретную анимацию, то значения свойства комбинируются как дискретные.

Некоторые свойства имеют специфическое поведение интерполяции, не охваченное этими четырьмя типами. В этом случае обратитесь к разделу «Интерполяция» свойства (например, visibility).

Анимация пользовательских свойств

Для пользовательских свойств, зарегистрированных с помощью метода registerProperty(), тип анимации — по вычисленному значению, а тип вычисленного значения определяется определением синтаксиса свойства.

Для незарегистрированных пользовательских свойств тип анимации — дискретный.

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_animated_properties