Настройка анимаций

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

Опция анимации в боковой панели

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

Использование предустановленных анимаций

• Начните с предустановок: Мы рекомендуем начинать с предустановленных анимаций, которые вы можете изменить в соответствии с вашими потребностями.
• Найдите больше предустановок: Вы можете найти список предустановленных анимаций на Animate.css. Если вам нужна конкретная анимация, дайте нам знать, и мы можем добавить ее в список.

Настройка анимаций

Модальное окно анимации упрощает процесс настройки CSS-анимаций с ключевыми кадрами в интерфейсе с низким уровнем кода, делая его доступным даже если вы не знакомы с кодированием.

Анимации с ключевыми кадрами — это когда вы определяете CSS-свойства для определенных процентов. И браузер обрабатывает переход за вас.

Например, если у вас есть такие ключевые кадры с длительностью 4 секунды.

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

Объект будет двигаться на 20px вниз в течение 2 секунд, затем двигаться на 20px вверх обратно в исходное положение в течение 2 секунд.

Если вы столкнетесь с какими-либо проблемами или хотите узнать больше об анимациях с ключевыми кадрами:

• Поиск в Интернете: Гуглите ваши конкретные вопросы; существует множество примеров и ресурсов.
• Учебник по CSS Keyframes: Обратитесь к официальному руководству по CSS keyframes на MDN для получения исчерпывающей информации.

Анимация дочерних элементов

Вы можете нацелиться на дочерние элементы корневого элемента, установив Targets на &>*.

Задержка с увеличением

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

targets: &>*
delay: anime.stagger(100) // увеличивает задержку на 100мс для каждого элемента.

targets: &>*
delay: anime.stagger(100, {start: 500}) // задержка начинается с 500мс, затем увеличивается на 100мс для каждого элемента.

Для получения дополнительных примеров, пожалуйста, посмотрите здесь Основы увеличения

Используйте свойство css animation

Простая css анимация всегда доступна для всех элементов в Пользовательские стили. Но вам может понадобиться включить Отключить в canvas для этого конкретного css правила, чтобы упростить редактирование в редакторе.