Рекомендации по курсу:

Функция CSS steps()

Определение и использование CSS steps() Функция используется для создания шаговых функций тайминг-контроля анимации.

Эта функция делит продолжительность анимации на равноудельные интервалы, указанные количеством (n). Например: если n равно 4, анимация будет разделена на 4 части. Это将持续ительность от 0% до 100%, разделенную на 4 части: 0%-25%, 25%-50%, 50%-75% и 75%-100%

Пример

Создание различных функций шагового тайминг-контроля для анимации:

div.a {
  animation: mymove 5s steps(4, end);
}
div.b {
  animation: mymove 5s steps(6, jump-start);
}
div.c {
  animation: mymove 5s steps(4, jump-none);
}
div.d {
  animation: mymove 5s steps(4, jump-both);
}

Попробуйте сами

Грамматика CSS

steps(n, step-position)
Значение Описание
n Обязательно. Указать количество шагов/Интервалов.
step-position

Опционально. Указать время возникновения прыжков между значениями. Использовать один из следующих ключевых слов:

  • jump-start или start: выполняется первый шаг в начале анимации
  • jump-end или end: выполняется последний шаг в конце анимации. По умолчанию используется end
  • jump-none: не происходит ни преждевременного, ни задержанного прыжка
  • jump-both: одновременное возникновение преждевременного и задержанного прыжка

Технические детали

Версия: Уровень 1 функций CSS Easing

Поддержка браузеров

Числа в таблице показывают версию браузера, которая полностью поддерживает эту функцию.

Chrome Edge Firefox Safari Opera
77 79 65 14 64

Соответствующие страницы

См. также:Свойство animation в CSS

См. также:Свойство animation-timing-function в CSS