animation-timing-function

Анимация скачками, плавно или как прыгающий мячик? Управляем механизмом проигрывания анимации.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

При помощи свойства animation-timing-function можно задать, как будет развиваться анимация между ключевыми кадрами: равномерно, или сначала быстро, потом медленно, или по каким-то сложным внутренним законам.

Пример

Секция статьи "Пример"
        
          
          .element {  animation-name: circle-to-square;  animation-duration: 2s;  animation-iteration-count: infinite;  animation-direction: alternate;  animation-timing-function: ease-in;}
          .element {
  animation-name: circle-to-square;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  animation-timing-function: ease-in;
}

        
        
          
        
      

Как понять

Секция статьи "Как понять"

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

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

Как пишется

Секция статьи "Как пишется"

linear

Секция статьи "linear"

Значение по умолчанию. Анимация проигрывается равномерно, без колебаний скорости.

ease

Секция статьи "ease"

Анимация начинается медленно, затем быстро разгоняется и снова замедляется к концу.

ease-in

Секция статьи "ease-in"

Анимация начинается медленно и плавно ускоряется к концу.

ease-out

Секция статьи "ease-out"

Анимация начинается быстро и плавно замедляется к концу.

ease-in-out

Секция статьи "ease-in-out"

Анимация начинается и заканчивается медленно, ускоряясь в середине.

cubic-bezier(x1, y1, x2, y2)

Секция статьи "cubic-bezier(x1, y1, x2, y2)"

Временная функция, описывающая тип ускорения в виде кривой Безье.

График кривой Безье

По оси x располагается временная шкала анимации, а по оси y — прогресс анимации. Это очень мощный инструмент для создания разнообразных анимаций со сложными внутренними законами.

Значения x1 и x3 должны находиться в диапазоне от 0 до 1 включительно. Задавая значения x2 и x4 меньше 0 или больше 1, можно добиться эффекта пружины.

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

Один из самых популярных инструментов — cubic-bezier.com.

step-start

Секция статьи "step-start"

Задаёт пошаговую анимацию, разбивая её на отрезки, изменения происходят в начале каждого шага.

step-end

Секция статьи "step-end"

Пошаговая анимация, изменения происходят в конце каждого шага.

steps(количество шагов, положение шага)

Секция статьи "steps(количество шагов, положение шага)"

Функция, указывающая, что анимация должна воспроизводиться шагами, резко переходя от одного состояния к другому.

Первый параметр указывает, на сколько отрезков нужно разбить анимацию. Значением должно быть целое положительное число больше 0.

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

  • jump-start — первый шаг происходит при значении 0.
  • jump-end — последний шаг происходит при значении 1.
  • jump-none — все шаги происходят в пределах от 0 до 1 включительно.
  • jump-both — первый шаг происходит при значении 0, последний — при значении 1.
  • start — ведёт себя как jump-start.
  • end — ведёт себя как jump-end.

Со значением start анимация начинается в начале каждого шага, со значением end — в конце каждого шага с задержкой. Задержка вычисляется как результат деления времени анимации на количество шагов. Если второй параметр не указан, используется значение по умолчанию end.

Очень сложно представить, как же будет выглядеть анимация при каждом из этих значений. Гораздо информативнее будет демка:

Открыть демо в новой вкладке

Подсказки

Секция статьи "Подсказки"