Компактный Конструктор Анимаций PRO

Создавайте и тестируйте анимации для разных событий: появление, наведение, нажатие

Рабочая область

Текст

Кнопка

Изображение Текст Кнопка

Показать Сбросить

Перетащите изображение или кликните

Появление Эффект Исчезновение

Галерея анимаций

Все Появление Исчезновение Эффекты

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

Тип анимации Появление (fadeIn) Появление снизу Появление сверху Появление слева Появление справа Увеличение Прыжок

Длительность (сек)

Задержка (сек)

Повторения 1 раз 2 раза 3 раза Бесконечно

Направление Нормальное Обратное Чередующееся

Заполнение Вперед Назад Оба

Настройки WOW.js

Отступ (offset)

Расстояние до элемента для запуска

Задержка (delay)

Задержка перед анимацией

Мобильная поддержка

Включено

Живые обновления

Включено

Расширенные настройки

Начальное состояние Прозрачность (opacity: 0) Скрытие (visibility: hidden) Сдвиг (transform: translateY(100px)) Уменьшение (transform: scale(0.8))

Плавное появление

Включено

Расстояние появления (distance)

Пикселей (для fadeInUp/Down и т.д.)

Длительность перехода

Секунды для плавного появления

Callback при старте

Callback при завершении

Пользовательский класс

Оставьте пустым для автоматического создания

Пример использования: <div class="your-class wow" data-wow-offset="100" data-wow-delay="0.3s">...</div>

Сгенерированный код

Для появления Для наведения Для нажатия

Сгенерировать готовый CSS

Для появления

Копировать CSS

/* Нажмите "Сгенерировать готовый CSS" */

Инструкция по использованию:

1. Выберите тип события (появление, наведение или нажатие)
2. Настройте параметры анимации
3. Нажмите "Сгенерировать готовый CSS"
4. Скопируйте готовый CSS и используйте на вашем сайте

<!-- Пример использования после генерации -->

Код успешно скопирован!