Войти
Создать сайт
Шаги
Сдвиг
Масштаб
Поворот
Прозрачность
Искажение
Маска
Точка трансформации
Сквозной курсор
Продолжительность
Задержка перед началом
Число повторений
Направление проигрывания
Плавность
Любая анимация состоит минимум из двух шагов. Чем больше шагов, тем сложнее анимация.
При нажатии на многоточие справа от шага, открывается контекстное меню с дополнительными настройками.
Начальное состояние — это положение элемента, откуда он начинает движение. Эта настройка позволяет задать начальное состояние элемента до проигрывания анимации. Далее вы можете добавлять любое нужное количество шагов.
Сдвиг
Этот параметр отвечает за сдвиг элемента на текущем шаге анимации — элемент будет сдвигаться на заданное  число единиц по оси X и по оси Y.
Масштаб
Этот параметр задаёт масштаб элемента в процентах — 100% это исходный масштаб на текущем шаге.
 Вы можете отдельно менять масштаб ширины или высоты. 
Если вы хотите, чтобы масштаб элемента менялся одновременно по высоте и ширине, свяжите значения кликом на иконку. 
Поворот
Этот параметр задаёт поворот элемента на заданное количество градусов.
Вы можете задать минусовое положение — тогда элемент будет поворачиваться против часовой стрелки. При значении более 360 градусов элемент совершит более одного оборота.
90 DEG— поворот на 90 градусов по часовой стрелке. 
-90 DEG — поворот против часовой стрелки
Прозрачность
Этот параметр задаёт значение прозрачности для элемента на текущем шаге.
Прозрачность измеряется в процентах. При значении 0 % элемент полностью видим. При 100 % прозрачности — элемент не виден.
Искажение
Этот параметр задает значения искажения для элемента на текущем шаге.
Изначально параметр не задан и скрыт на панели настроек. Для того, чтобы задать значение необходимо сделать клик по иконке +
Значения параметра задается в градусах отдельно для оси X и оси Y. Вы можете задавать положительные и отрицательные значения.
С помощью искажения можно создавать интересные эффекты.
Маска
Маска это невидимая форма, она помогает скрыть или показать часть объекта. Это нужно, чтобы элемент плавно проявлялся на странице.
Изначально параметр скрыт на панели настроек. Для того, чтобы задать значение необходимо сделать клик по иконке +
Значение параметра задается в процентах.
Точка трансформации
Этот параметр задаёт точку, относительно которой элемент будет поворачиваться, искажаться или смещаться.
Имеет девять возможных значений. На видео мы показывает некоторые из них, чтобы вы увидели разницу. 
Сквозной курсор
Этот параметр означает, что в момент воспроизведения шага элемент станет некликабельным.
Продолжительность
Параметр задаёт время, в течение которого будет выполняться текущий шаг.
Диапазон значений параметра от 0.01 до 5 секунд с шагом 0.1 секунда.
При типе взаимодействия При скролле параметр доступен только для пошагового проигрывания.
Задержка перед началом
Параметр задаёт время, после окончания которого начнет выполняться текущий шаг.
Диапазон значений параметра от 0.01 до 5 секунд с шагом 0.1 секунда.
Число повторений
Число повторений. По умолчанию  анимация повторяется один раз. Также можно задать число повторений или настроить бесконечный повтор.
В примере ниже мы покажем, как это будет выглядеть. 
Направление проигрывания
У анимации есть два направления проигрывания: 
Туда — анимация проигрывается от начального положения до последнего шага.
Туда-обратно — когда анимация после завершения проигрывается обратно до начального положения.
Плавность
Этот параметр задаёт изменение скорости анимации, которая может ускоряться и замедляться в пределах шага.
Вы можете самостоятельно задать значение для двух точек на графике.
Для выбора доступны 12 пресетов.
Скопировано
EaseIn
cubic-bezier(0.42, 0, 1, 1)
Кликните, чтобы скопировать
Кликните, чтобы скопировать
Скопировано
EaseOut
cubic-bezier(0, 0, 0.58, 1)
Кликните, чтобы скопировать
Скопировано
EaseInOut
cubic-bezier(0.42, 0, 0.58, 1)

Конструктор сайтов

Дополнительно

Компания

Контакты

8 (800) 555-45-12

Звонок по России бесплатный

© 2012 – 2023 ООО «Флексби»
English
Russian
Russian
Loading...
Made on