Сдвиг
Масштаб
Поворот
Прозрачность
Искажение
Маска
Точка трансформации
Сквозной курсор
Продолжительность
Задержка перед началом
Число повторений
Направление проигрывания
Плавность

Любая анимация состоит минимум из двух шагов. Чем больше шагов, тем сложнее анимация.

При нажатии на многоточие справа от шага открывается контекстное меню с дополнительными настройками.

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

Этот параметр отвечает за сдвиг элемента на текущем шаге анимации — элемент будет сдвигаться на заданное  число единиц по оси X и по оси Y.

Этот параметр задаёт масштаб элемента в процентах — 100% это исходный масштаб на текущем шаге.

Вы можете отдельно менять значение ширины или высоты. 

Если вы хотите, чтобы размер элемента менялся одновременно по высоте и ширине, свяжите значения кликом на иконку. 

Этот параметр задаёт поворот элемента на заданное количество градусов.

Вы можете задать минусовое положение — тогда элемент будет поворачиваться против часовой стрелки. При значении более 360 градусов элемент совершит более одного оборота.

90 DEG— поворот на 90 градусов по часовой стрелке. 
-90 DEG — поворот против часовой стрелки

Этот параметр задаёт значение прозрачности для элемента на текущем шаге.

Этот параметр задает значения искажения для элемента на текущем шаге.

Изначально параметр не задан и скрыт на панели настроек. Для того, чтобы задать значение необходимо сделать клик по иконке +

Значения параметра задается в градусах отдельно для оси X и оси Y. Вы можете задавать положительные и отрицательные значения.

С помощью искажения можно создавать интересные эффекты.

Маска — это невидимая форма, она помогает скрыть или показать часть объекта. Это нужно, чтобы элемент плавно проявлялся на странице.

Изначально параметр скрыт на панели настроек. Для того, чтобы задать значение необходимо сделать клик по иконке +

Маска доступна в виде круга и квадрата. Значение параметра задается в процентах.

Этот параметр задаёт точку, относительно которой элемент будет поворачиваться, искажаться или смещаться.

Он имеет девять возможных значений. На видео мы показывает некоторые из них, чтобы вы увидели разницу. 

Этот параметр означает, что в момент воспроизведения шага элемент становится некликабельным.

Параметр задаёт время, в течение которого будет выполняться текущий шаг.

Диапазон значений параметра от 0.01 до 5 секунд с шагом 0.1 секунда.

Параметр задаёт время, после окончания которого начнет выполняться текущий шаг.

Диапазон значений параметра от 0.01 до 5 секунд с шагом 0.1 секунда.

Число повторений. По умолчанию  анимация проигрывается один раз. Также можно задать число повторений или настроить бесконечный повтор.

В примере ниже мы покажем, как это будет выглядеть. 

У анимации есть два направления проигрывания: 

Туда — анимация проигрывается от начального положения до последнего шага.

Туда-обратно — когда анимация после завершения проигрывается обратно до начального положения.

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

Вы можете самостоятельно задать настройки плавности. 

Для кривой доступны 12 пресетов.