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

Скопировано

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

ease

Скопировано

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

ease-in

Скопировано

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

ease-out

Скопировано

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

ease-in-out

Скопировано

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

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

Скопировано

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

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

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

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

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

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

step-start

Скопировано

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

step-end

Скопировано

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

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.

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

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

Подсказки

Скопировано