Генератор CSS-анимации появления

Генератор CSS-анимации появления: для чего нужен

Выберите эффект, длительность, кривую (рекомендуется сильный ease-out), расстояние и каскадную задержку между элементами. Предпросмотр показывает шесть блоков, которые появляются, и его можно повторить.

Код использует переходы opacity и transform, IntersectionObserver для анимации, когда элемент появляется на экране, и версию без смещения для тех, кто предпочитает меньше движения. Без JavaScript содержимое показывается как обычно.

Как пользоваться

1. Выберите эффект, длительность и кривую.
2. Настройте расстояние и каскад и посмотрите предпросмотр.
3. Скопируйте CSS и скрипт и используйте класс anima.

Когда использовать

• Разделы лендингов, появляющиеся при прокрутке.
• Карточки услуг и товаров каскадом.
• Финальная доработка корпоративных сайтов.

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

Какую длительность использовать?

Для элементов интерфейса — от 150 до 300 миллисекунд. В разделах презентационных страниц до 600 мс ещё выглядит естественно. Слишком долгие анимации делают сайт медленным на вид.

Какую кривую выбрать?

Для того, что входит на экран, используйте кривую, замедляющуюся в конце (сильный ease-out, например cubic-bezier(0.23, 1, 0.32, 1)): движение начинается быстро и плавно успокаивается. Избегайте ease-in для появления, потому что он как раз тормозит начало.

А как же те, кто не любит движение?

Код учитывает системную настройку уменьшения движения (prefers-reduced-motion): элементы просто появляются с коротким затуханием, без смещения.

Как работает режим при прокрутке?

IntersectionObserver добавляет класс visivel, когда элемент попадает на экран. Без JavaScript элементы показываются как обычно, без анимации.

Правда бесплатно?

Да, 100% бесплатно. Без регистрации, без подписки и без ограничений использования. Все инструменты Tools123 бесплатны.

Похожие инструменты