Вход
Главная
Цены
Документация
Обратная связь
Русский

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

Last updated on 12/6/2024@mrbirddev

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

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

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

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

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

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

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

0% translateX(0)

50% translateX(-20px)

100% trasnlateX(0)

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

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

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

Триггер

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

  • Элемент показан: Это значение по умолчанию. Анимация будет запущена, когда элемент либо прокручивается в поле зрения, либо содержащий раздел отображается Хеш-секция
  • Элемент показан (повтор каждый раз): То же, что и выше, за исключением того, что анимация будет воспроизводиться каждый раз, когда элемент отображается.
  • Страница загружена: Анимация будет запущена при загрузке страницы.

Цель(и)

Обычно вам не нужно это настраивать. Значение по умолчанию — &, что означает корневой элемент.

Однако есть случаи, когда вам нужно будет это настроить.

  • Чтобы анимировать элемент Расширенный фон, вы можете установить Цель(и) на Первый дочерний элемент, так как элемент Расширенный фон всегда будет первым дочерним элементом корневого элемента.

  • Чтобы применить задержку с интервалом ко всем дочерним элементам. Прочтите раздел Delay & staggering delay для получения более подробной информации.

Delay & staggering delay

Если вы установите Задержка на 1000ms, анимация начнется после ожидания в 1000ms.

Если вы установите Задержка на 50ms и установите цели на Все прямые дочерние элементы. Анимация будет применена к каждому из прямых дочерних элементов и будет ждать

  • первый элемент, 1000ms,
  • второй элемент, 1050ms,
  • третий элемент, 1100ms,
  • ...

Text staggering

Это работает для компонента Текст.

Если вы установите Задержка и установите цели на Все буквы. Эффект интервала будет применен к каждой букве.

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

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

Loading...