Функция CSS `linear()`

linear() CSS функция создаёт кривую перехода, которая равномерно проходит между точками. Как <easing-function>, она создаёт переходы, в которых интерполяция происходит с постоянной скоростью от начала до конца.

Синтаксис

linear(0, 1)
linear(0, 0.25, 1)
linear(0, 0.25 75%, 1)
linear(0, 0.5 25% 75%, 1)

Параметры

Функция принимает два или более следующих значений, представляющих точки прогресса на временной шкале анимации:

<number>

Представляет момент времени в пределах длительности анимации или перехода. Необходимо указать как минимум два значения. Значение 0 обозначает начало перехода, а 1 — его конец. Также допускаются значения за пределами диапазона от 0 до 1.

<percentage> Необязательно

Указывает, когда на временной шкале анимации достигается значение прогресса <number>. Его можно указать после любого значения <number>, кроме первого и последнего, причём можно указать до двух таких значений. Если указаны два процентных значения, они задают длину участка: первое указывает начальную точку, а второе — конечную точку этого участка анимации или перехода. Если значение <percentage> не указано, значения прогресса равномерно распределяются по временной шкале.

Описание

Функция linear() позволяет приближённо задавать сложные анимации и переходы посредством линейной интерполяции между указанными точками. Обычно функцию linear() используют, задавая множество точек, чтобы приблизить любую кривую.

Функция linear() создаёт переходы, в которых прогресс между указанными точками происходит с постоянной скоростью. Например, linear(0, 0.25, 1) содержит линейные остановки в точках 0, 0.25 и 1. Анимация начинается в точке 0, линейно перемещается к 0.25, а затем линейно продолжается до точки 1. Поскольку проценты не указаны, для каждого сегмента используется одинаковая длительность (50%), то есть от 0 до 0.25 и от 0.25 до 1.

По умолчанию остановки расположены на равном расстоянии друг от друга. Например, если остановок пять, они будут находиться на отметках 0%, 25%, 50%, 75% и 100% длительности. Необязательные процентные значения позволяют точнее управлять переходом, задавая, когда должно достигаться каждое значение прогресса, и обеспечивая более контролируемое изменение.

Рассмотрим анимацию длительностью 100 секунд, в которой изменение составляет 100 пикселей. Допустим, функция сглаживания анимации задана как linear(0, 0.25 75%, 1). В этом случае за первые 75 секунд (75% длительности) анимация достигает 25 пикселей (25% от общего изменения). Оставшиеся 75 пикселей применяются за последние 25 секунд анимации.

Для той же анимации допустим, что функция сглаживания задана как linear(0, 0.5 25% 75%, 1). В этом случае анимация достигает 50 пикселей (50% от общего изменения) за 25 секунд (25% длительности), а затем остаётся на этом значении в течение 50 секунд (от 25% до 75% длительности). Затем оставшиеся 50 пикселей применяются за последние 25 секунд. Обратите внимание, что linear(0, 0.5 25% 75%, 1) эквивалентно linear(0, 0.5 25%, 0.5 75%, 1).

Формальный синтаксис

<linear()> = 
  linear( [ <number> && <percentage>{0,2} ]# )

Примеры

Использование функции linear()

Следующие функции linear() допустимы для использования в CSS:

/* Three evenly distributed progress points */
linear(0, 0.25, 1)

/* Custom timing with percentage values */
linear(0, 0.5 25% 75%, 1)

Следующие определения linear() недопустимы:

/* At least two parameters are required */
linear(0.5)

/* Percentages must be in ascending order */
linear(0, 0.25 80%, 0.5 60%, 1)

/* Values must be numbers */
linear(start, middle, end)

Спецификации

Совместимость с браузерами

См. также

• Другие функции сглаживания: cubic-bezier() и steps()
• Модуль функций сглаживания CSS
• linear() генератор сглаживания от Jake Archibald