animation-timing-function

При помощи свойства 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-анимации по умолчанию проигрываются линейно, меняя свойства элемента на равные доли в равные промежутки времени. Такое поведение редко встречается в реальной жизни. Тот же мячик начинает своё движение медленно и со временем ускоряется.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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