animation — timing — function
Анимация скачками, плавно или как прыгающий мячик? Управляем механизмом проигрывания анимации.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
Обновлено 27 сентября 2023
Кратко
Скопировать ссылку «Кратко» Скопировано
При помощи свойства 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 .
Очень сложно представить, как же будет выглядеть анимация при каждом из этих значений. Гораздо информативнее будет демка:
Подсказки
Скопировать ссылку «Подсказки» Скопировано
Подробнее об анимациях написано в статье «CSS-анимации».
Свойство transition-timing-function
CSS позволяет задать не только длительность перехода, но и его скорость. Под скоростью в данной ситуации подразумевается своеобразный стиль хода анимации. Например, переход может начинаться медленно, затем ускоряться, а в конце снова замедляться. Также переход может быть ровным от начала до конца либо стартовать медленно и быстро завершаться. Именно этот «рисунок», характер движения определяется через CSS3-свойство transition-timing-function .
Новички иногда путаются в свойствах transition-duration и transition-timing-function , потому что на первый взгляд сложно понять разницу между длительностью и скоростью. Если дословно перевести названия этих свойств с английского, то duration переводится как «продолжительность», «длительность», а timing function — как «функция расчета времени». Рекомендуем ориентироваться на оригинальные названия свойств во избежание путаницы.
Свойство transition-timing-function устанавливает, как будет распределяться скорость движения анимации в течение ее длительности. Распределение скорости анимации происходит в рамках того интервала, который задан через transition-duration .
Значения transition-timing-function
Скорость анимации можно изобразить в виде математической функции, которая показывает характер ее движения от начальной точки с координатами 0.0, 0.0 до конечной точки с координатами 1.0, 1.0.
В качестве значений можно использовать как предустановленные функции, так и создавать свои. Список ключевых слов, принимаемых свойством transition-timing-function, следующий:
- ease (значение по умолчанию) — начало анимации медленное, к середине скорость повышается и в конце вновь снижается.
- ease-in — начало анимации медленное, к концу она ускоряется.
- ease-out — начало анимации быстрое, к концу она замедляется.
- ease-in-out — начало и конец анимации медленные.
- linear — скорость равномерная на протяжении всей анимации.
- step-start — переход от одного стиля к другому происходит моментально и резко (анимации нет).
- step-end — по истечении заданного времени происходит резкий переход от одного стиля к другому (без анимации).
- steps() — анимация происходит ступенчато. В скобках сначала указывается число шагов, за которые должен осуществиться переход от одного стиля к другому, после чего ставится запятая и указывается параметр start или end , от которого зависит, когда будет начинаться анимация — в начале первого шага или в конце. Пример записи:
transition-timing-function: steps(10, start);
Ниже приведены наглядные примеры того, с какой скоростью совершается переход при разных значениях свойства transition-timing-function . Длительность перехода — 6 секунд. Наведите курсор на блок, чтобы запустить анимацию (работает во всех современных браузерах):
Cubic bezier что это
Здесь собраны онлайн-инструменты для работы с CSS
Бесплатный онлайн-генератор графики для продающих сайтов
С помощью генератора вы за считанные секунды сможете сгенерировать красивые кнопки, заголовки, блоки специальных предложений, а также гарантии, и все это с любым текстом, который вы сами напишите.
Добавил: Евгений Попов
Создан: 30 Августа 2016 Просмотров: 18582 Комментариев: 0
Продвинутый Онлайн CSS3 Генератор
EnjoyCSS — это мощный генератор CSS3 кода. Данный сервис позволит вам без единой строчки кода создать прикольные стили для пользовательского интерфейса.
Добавил: Станислав Протасевич
Создан: 6 Апреля 2014 Просмотров: 89690 Комментариев: 5
Онлайн сервис для проверки кода — jsFiddle
Онлайн сервис для проверки и демонстрации идей в программировании веб ресурсов. Можно подключать различные популярные библиотеки и делиться кодом с коллегами и мировым сообществом.
Добавил: Сергей Фастунов
Создан: 7 Февраля 2013 Просмотров: 208082 Комментариев: 1
Онлайн-сервис для рефакторинга CSS кода
Проект для рефакторинга и генерации нового кода для работающего сайта. Основное назначение — устранение повторений, противоречий и создание основы для дальнейшего развития проекта.
Добавил: Сергей Фастунов
Создан: 4 Февраля 2013 Просмотров: 23121 Комментариев: 5
Набор онлайн генераторов для подготовки элементов интерфейса — UIParade
Отличный набор из онлайн генераторов, которые облегчат труд веб мастера. В наборе имеется 4 инструмента — для кнопок, для форм, для иконок и для лент. Настраиваем внешний вид в визуальном редакторе и копируем код в свой проект.
Добавил: Сергей Фастунов
Создан: 24 Января 2013 Просмотров: 24066 Комментариев: 0
Онлайн сервис для подготовки наборов свойств CSS3
Онлайн сервис с интерфейсом в стиле Photoshop для визуальной установки значений свойств CSS3 — теней, радиусов обводки и прочего. Готовый код копируем и используем в своем проекте.
Добавил: Сергей Фастунов
Создан: 21 Января 2013 Просмотров: 19239 Комментариев: 2
Генератор спрайтов — Stitches
Онлайн генератор спрайтов CSS. Изображения можно «перетаскивать» в специальную зону. Код генератора доступен в форме плагина jQuery, что открывает возможности по использованию функционала в своих приложениях.
Функции времени
Функция времени представляет собой описание изменения скорости перехода. Анимация выглядит безжизненной, если она происходит в фиксированном, линейном темпе. Использование функций времени позволяет сделать переходы более реалистичными.
Здесь приведён пример анимации с линейной функцией времени. Движение происходит вперёд-назад в неизменном темпе.
В данном примере мы используем пользовательскую функцию времени cubic-bezier :
Кубическая функция времени Безье
В данном случае cubic-bezier заставляет анимацию немного качнуться назад перед быстрым переходом ко второму состоянию и даже слегка выйти вперёд, прежде чем скорректироваться обратно.
CSS для начального состояния и состояния наведения в каждом примере одинаковый. Всё, что поменялось, — это функция времени.
Давайте познакомимся с каждой из них и узнаем, как они влияют на движение наших элементов.
Если хотите поиграть с этими примерами, я настроил CodePen здесь.
linear
Линейный переход движется с постоянной скоростью от начала и до конца. Поскольку в переходе нет кривой, он не ускоряется и не замедляется. Это может быть полезно при создании анимации, требующей постоянного движения, например, пейзажа, движущегося за окном поезда, или постоянно вращающейся луны.
ease-in
Функция времени ease-in начинается медленно и ускоряется к концу перехода. Это можно сравнить с шаром, который начинает катиться вниз по склону и заканчивает движение с наибольшей скоростью у подножия. Или, скажем, скучающая рыба плавает влево и вправо.
ease-out
Функция ease-out противоположна ease-in . Начинается быстро и замедляется к концу перехода. Применяется в тех случаях, когда что-то должно выглядеть так, будто оно стремительно проносится за пределами экрана и замедляется для остановки.
ease-in-out
ease-in-out — это комбинация функций ease-in и ease-out . Начинается медленно, ускоряется в средней части перехода, а затем замедляется к концу. В качестве иллюстрации представьте автомобиль, с ускорением стартующий с места, а затем замедляющийся перед остановкой. Если вы создаёте анимацию загрузки или нечто подобное, то это может выглядеть весьма эффектно.
cubic-bezier
Все функции времени, которые мы рассмотрели ранее, являются примерами кубической кривой Безье. Это кривая описывает «форму» функции времени. Таким образом, определение cubic-bezier похоже на создание собственной функции времени.
Она состоит из четырёх значений, обозначающих две координаты, и может выглядеть следующим образом:
transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);Здесь две координаты: (1, -0,49) и (.13, 1,09). На графике они выглядят следующим образом:
Вместо создания координат вручную, я использую сайт cubic-bezier.com. Это отличный способ получения интересных эффектов — и они становятся действительно забавными, если использовать значения больше 1. Это позволяет создать переходы, которые выходят за рамки и отскакивают обратно.
steps
Если в большинстве функций времени используются кривые, то функция steps разбивает переход на набор шагов и прыжков между ними. Например, если указать steps(4) , то переход разделит длительность на 4 дискретных скачка (см. рисунок выше).
Это полезно для спрайтовой анимации, например, индикатора загрузки или анимированного персонажа видеоигры. Задав позицию фона в начале серии кадров, можно использовать функцию steps для перехода через каждый кадр и создания видимости движения.
В качестве примера можно привести анимацию кнопки избранного в Twitter.
Вы также можете указать, будет ли переход удерживать первый или последний кадр. По умолчанию используется end , поскольку предполагается, что первый кадр в спрайте уже показан до начала анимации.
Мы можем указать, что именно применяется при настройке шагов:
transition: all 2s steps(10, start); transition: all 2s steps(10, end);Другие примеры
Я написал о функциях времени здесь, если хотите прочитать больше и увидеть другие примеры.
Домашнее задание
В продолжение предыдущего примера домашнего задания попробуйте поменять значение функции transition-timing-function и посмотрите, как это изменит впечатление от перехода.
Вы также можете попробовать изменить значения в этом примере. Технически это анимация, а не переход, но функция времени применяется точно так же.