Как создать CSS-анимацию появления с прозрачностью и вертикальным смещением

Для чего подходит генератор CSS-анимации

Этот инструмент помогает подготовить текст CSS для анимации появления элемента. В результате успешного расчёта формируется блок с ключевыми кадрами и объявлением анимации для элемента. Такой способ удобен, когда нужно быстро получить основу для карточки, уведомления, заголовка или другого элемента интерфейса, который должен появиться с лёгким подъёмом вверх.

Настройка строится вокруг пяти параметров: имени анимации, длительности, функции плавности, направления и режима заполнения. Их можно задать перед расчётом или оставить без значения. Если параметры не указаны, используются имя fadeIn, длительность 1, функция ease, направление normal и режим заполнения none. Имя нужно выбирать так, чтобы оно не конфликтовало с другими анимациями в вашей таблице стилей.

Как получить CSS-текст

1. Откройте инструмент и найдите поля для имени анимации, длительности, функции плавности, направления и режима заполнения. Если вам подходит стандартный вариант, не меняйте значения: будут использованы fadeIn, 1, ease, normal и none соответственно.

2. Введите имя, по которому анимацию будет удобно вызывать в CSS. Если оставить поле имени пустым, перед созданием текста оно заменится на fadeIn. Поэтому для понятного проекта лучше указать собственное имя, например cardEnter или noticeAppear.

3. Задайте длительность. Число из этого поля добавляется к объявлению с единицей s, то есть секунд. Например, значение 0.6 превращается в длительность 0.6s. Выберите функцию плавности, направление и режим заполнения из доступных в интерфейсе вариантов.

4. Запустите создание результата. Не вводите в поле длительности готовую строку с единицей измерения, если интерфейс ожидает числовое значение: инструмент сам добавляет секунды к полученному значению.

5. Скопируйте сформированный CSS-текст в таблицу стилей и проверьте, что имя в объявлении элемента совпадает с именем внутри ключевых кадров. Затем примените это объявление к нужному селектору. Если меняете имя, перенесите изменение в обе связанные части CSS.

Как читать и проверять результат

Готовый результат содержит два связанных фрагмента: описание ключевых кадров и объявление анимации для элемента. В ключевых кадрах начало (0%) задаёт непрозрачность 0 и вертикальное смещение 20px, а конец (100%) задаёт непрозрачность 1 и смещение 0. Поэтому предусмотренный эффект состоит из появления с одновременным перемещением по вертикали, а не из произвольного набора CSS-переходов.

Проверьте три вещи. Во-первых, имя должно совпадать в ключевых кадрах и в объявлении элемента. Во-вторых, длительность должна выглядеть как число с добавленной единицей секунд. В-третьих, выбранные направление, плавность и режим заполнения должны соответствовать сценарию интерфейса. Если результат выглядит не так, как ожидалось, сначала сравните эти параметры с теми, которые вы вводили.

Инструмент не предназначен для проектирования произвольных ключевых кадров или настройки других CSS-свойств: зафиксированная схема использует только две стадии, прозрачность и вертикальный сдвиг. Поэтому для сложного сценария, где нужны повороты, масштабирование, дополнительные промежуточные состояния или другие свойства, полученный текст придётся расширять вручную.

Практический пример

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

Для карточки уведомления задайте имя cardEnter, длительность 0.6, функцию ease, направление normal и режим заполнения none, затем создайте CSS-текст.

После успешного создания появляется CSS-текст с ключевыми кадрами, где на 0% указаны opacity: 0 и translateY(20px), а на 100% - opacity: 1 и translateY(0). В объявлении элемента используется имя cardEnter и длительность 0.6s.

Ограничения

• Схема ограничена двумя ключевыми стадиями, прозрачностью и вертикальным смещением; дополнительные свойства и промежуточные кадры не настраиваются через эти параметры.

Частые ошибки

• Если имя оставить пустым, результат получит имя fadeIn, а если добавить s к длительности вручную, инструмент дополнит введённое значение ещё одной единицей секунд. Укажите имя без пробелов и вводите длительность в том формате, который ожидает поле, без готового суффикса s.

Частые вопросы

Что произойдёт, если оставить имя анимации пустым?

Если имя не указано, перед созданием CSS-текста используется fadeIn. Чтобы получить понятный вызов в таблице стилей, задайте имя самостоятельно.

В каких единицах задаётся длительность?

Длительность добавляется к объявлению с единицей s, поэтому числовое значение 0.6 записывается как 0.6s. Не добавляйте единицу повторно, если поле принимает число.

Можно ли настроить вид создаваемой анимации?

Да, параметры можно изменить: поддерживаются имя, длительность, функция плавности, направление и режим заполнения. Содержимое ключевых кадров при этом остаётся схемой с двумя стадиями: от прозрачности 0 и смещения 20px к прозрачности 1 и смещению 0.