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

steps() CSS-функция задаёт переход, который делит входное время на заданное количество равных интервалов. Этот подкласс ступенчатых функций иногда также называют лестничными функциями.

Синтаксис

/* Different intervals */
steps(2, end)
steps(4, jump-end)
steps(12, end)

/* Different jump positions */
steps(3, jump-start)
steps(3, jump-end)
steps(3, jump-none)
steps(3, jump-both)

Параметры

Функция принимает следующие параметры:

<integer>

Задаёт количество равноотстоящих интервалов, или «шагов». Это должно быть положительное целое число больше 0, если только второй параметр не равен jump-none; в этом случае число должно быть положительным целым числом больше 1.

<step-position>

Задаёт момент перехода между значениями. Если параметр не указан, по умолчанию используется end. Возможные ключевые слова:

jump-start или start

Указывает, что первый шаг происходит в начале анимации.

jump-end или end

Указывает, что последний шаг происходит в конце анимации.

jump-none

Указывает, что ни ранних, ни поздних переходов не происходит.

jump-both

Указывает, что происходят и ранние, и поздние переходы.

Описание

Функция steps() делит длительность анимации на равные интервалы. Например, steps(4, end) делит анимацию на четыре равных интервала: значения меняются в конце каждого интервала, кроме последнего изменения, которое происходит в конце анимации.

Если анимация состоит из нескольких сегментов, заданное количество шагов применяется к каждому сегменту. Например, если анимация состоит из трёх сегментов и использует steps(2), всего будет шесть шагов — по два шага на сегмент.

На следующем изображении показано влияние разных значений <step-position> на момент переходов:

steps(2, jump-start)  /* Or steps(2, start) */
steps(4, jump-end)    /* Or steps(4, end) */
steps(5, jump-none)
steps(3, jump-both)

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

<steps()> = 
  steps( <integer>, <step-position>? )

<integer> = 
  <number-token>

<step-position> = 
  jump-start |
  jump-end |
  jump-none |
  jump-both |
  start |
  end

Примеры

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

Следующие функции steps() допустимы:

/* Five steps with jump at the end */
steps(5, end)

/* Two steps with jump at the start */
steps(2, start)

/* Using default second parameter */
steps(2)

Следующие функции steps() недопустимы:

/* First parameter must be an <integer>, not a real value */
steps(2.0, jump-end)

/* Number of steps must be positive */
steps(-3, start)

/* Number of steps must be at least 1 */
steps(0, jump-none)

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

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

См. также

• Другие функции плавности: cubic-bezier() и linear()
• Модуль функций плавности CSS
• Ступенчатая функция в Википедии