Анимация — несколько рисунков, показанных последовательно, чтобы создать иллюзию движения. Анимации привлекают внимание пользователей и помогают сделать интерфейсы понятными. Мы подготовили перевод статьи, чтобы разобраться, как контролировать движения и переходы в CSS. Есть два способа анимировать элементы в CSS: свойства animationи transition. Свойство animationпозволяет изменять свойства элемента в течение определённого периода, а transitionопределяет, как элемент меняется за определённый период. Возникает вопрос, в чём же разница. Для animation нужны @keyframes, то есть требуется определить точки начала и конца изменений. Ключевые кадры используют для пошаговых анимаций. Более простые анимации создают при помощи transition. В этом случае движение запускается по определённому сигналу, например, по клику или наведению курсора. Свойства animation и transition управляют продолжительностью, задержкой, итерациями движения. Это функции, которые определяют, как веб-элементы работают в каждом кадре анимации: animation-timing-function и transition-timing-function действуют и как автономные свойства CSS, и как значения свойств animation и transition . Поэтому свойство animation может выглядеть так: Или так:  То же самое со свойством transition:   Или: Transition-timing-function определяет кривую скорости эффекта перехода. Кривая — соединение множества точек. Так что каждый период transition разделён на несколько точек. Всего в CSS шесть transition-timing-functions: linear ease ease-in ease-out ease-in-out cubic-bezier() Они служат для создания плавных переходов, поэтому называются функциями плавности. Анимации с linear двигаются с постоянной скоростью. При этом с начала до конца никаких изменений внутри функции нет, так что кривая скорости тут, скорее, прямая. Анимации с этой функцией начинаются медленно, ускоряются, потом снова замедляются до стартовых значений. Эта функция используется по умолчанию.  Для понимания устроим гонки, участвуют ease и linear: Используем простую разметку  HTML:   Добавляем CSS:   Добавляем анимацию. Триггером делаем :hover.  Итог:   На первый взгляд, кажется, что ease быстрее, чем linear, но в обоих случаях animation-duration одинаково. Если присмотреться, обе анимации заканчиваются в одной точке. В гонке ничья. Анимации с функцией ease-in начинаются медленно, ускоряются к концу. Функция ease-out вызывает обратный эффект: быстрый старт и медленный финал. Ease-in-out анимания начинается медленно, ускоряется в середине, завершается медленно. Похоже на ease, но только с симметричной кривой скорости.  Снова гоночки: Все функции плавности основаны на кубической кривой Безье, которая определяется контрольными точками. Даже linear  — кривая Безье с двумя контрольными точками. Точки P1 и P3 должны быть в пределах от 0 до 1. Точки P2 и P4 могут быть с любыми значениями, в том числе отрицательными. Удобнее создавать все точки в пределах от -1 до 1, чтобы анимации не дёргались. Зададим рандомные значения для точек. Наводим курсор и смотрим, что вышло. Значения для контрольных точек можно задавать вручную, но это довольно долго. Есть два способа выбрать идеальную скорость cubic-bezier(): инструменты разработчика и генератор.  Используем инструменты проверки Задаём анимированному элементу любую временную функцию. Открываем инструменты разработчика. У нас скриншоты из Chrome. Если вы используете сокращённые свойства animation или transition, рядом с названием свойства найдёте значок раскрывающегося списка. Кликаем, раскрываем список значений — среди них будет время. В другом случае это свойство отображается отдельно.  Рядом с названием временно функции есть значок кривой, который открывает редактор Безье.  Кликаем и регулируем cubic-bezier(). В этом помогает визуализатор. Когда найдёте подходящую кривую скорости, скопируйте cubic-bezier() и вставьте в проект. Используем генератор Заходим на cubic-bezier.com — это инструмент, которые создаёт кривые скорости. Поиграйте с настройками, пока не найдёте подходящий вариант. В это помогут предварительный просмотр и сравнение с функциями по умолчанию. Скопируйте и вставьте в проект.  Функция animation-timing-function определяет кривую скорости. Да, тоже. Свойство  animation делится на @keyframes, которые работают как FPS у камер. Animation-timing-function работает с любой функцией плавности, а также с другими функциями: step-end, step-start и steps. Когда со свойством animation используют функция плавности, нужно добавлять  @keyframes с начальной и конечной точками. Посмотрим, как это работает. Сделаем анимации скролла, элементы будут появляться при прокрутке вниз.  Начинаем: Стилизуем и присваиваем каждому элементу animation:   Все анимированные элементы сопровождаем классом reveal, который спрячет их до запуска анимации.   Анимации прокрутки контролируем функцией JavaScript:   Условие запуска анимации — появление элемента при скролле страницы. Эта функция отслеживает дистанцию прокрутки элемента, elementTop, пока скролл не достигнет точки, в которой элемент должен быть видимым, elementVisible. getBoundingClientRect().top — расстояние от верхней точки области просмотра, window.innerHeight — высота области просмотра. Далее@keyframes: Эти функции разбивают анимацию на равные части или шаги: step-end запускает анимацию после первого @keyframe и пропускает шаг в конце, step-start действует наоборот. Вот как это работает: Итог: Ракета с step-start переходит к первому @keyframe, как только начинается анимация.  Для усложнения используем steps(), чтобы указать количество шагов в анимации: Итог: Ключевые слова, которые можно использовать со steps() в дополнение к количеству шагов: jump-start jump-end jump-both jump-none Jump-start и jump-end работают так же, как step-start и step-end; jump-both — анимация пропускает шаг с обоих концов; jump-none— анимация не пропускает ни одного шага, каждый шаг равномерно распределён по продолжительности. Результат: Работают для всех свойств CSS, в том числе: inherit: даёт дочернему элементу наследуемые свойства родительского. Если свойства не наследуются, то возвращаются к initial. initial: кажется, что initial — способ использовать дефолтные значения свойств, но это не всегда так. У временных функций initial совпадает с дефолтным значением ease. revert: устанавливает свойства элемента как дефолтные CSS свойства браузера. unset: похоже на  revert, но с дополнениями. Влияет на наследуемые и ненаследуемые свойства. Свойства выше — наследуемые. К сожалению, animation-timing-function и transition-timing-function не наследуются. Итак, если свойство наследуется, unset присваивает ему значение inherit. Если нет — свойству присваивается значение initial. Свойство -delay можно использовать с временными функциями: animation-delay и transition-delay откладывают старт анимации. Добавить свойство можно при помощи сокращения: Порядок свойств неважен, вторым значением времени в объявлении всегда будет свойство delay. Если у нас такое объявление:   Тогда transition-delay равняется 1s. Это же относится animation. Покажем на примере: Такое свойство можно использовать для загрузки разных разделов веб-страницы без необходимости определять разные  animation или transition для каждого раздела.   Проводник Нетологии на Хабре