Animate.css: бесплатные CSS-анимации для любого сайта

По моему опыту, самая сложная часть создания хорошо выглядящего сайта через агента — это не верстка и не цвета, а отсутствие движения. Когда ничего на странице не двигается, она ощущается незаконченной для человека, который её посещает, даже если дизайн сам по себе хорош.

Я использую одну коллекцию CSS-анимаций для большинства своих проектов, потому что агенты, с которыми я работаю, знают её хорошо и могут применить без каких-либо объяснений. У неё более 82 000 звёзд на GitHub, и она охватывает каждый тип анимации, который мне когда-либо был нужен — от плавных появлений до прыгающих эффектов и скользящих входов.

Авторы описывают это как «анимации CSS — просто добавь воды», и это описание точное в буквальном смысле. Вы добавляете одну строку в секцию head вашего HTML-файла, добавляете два имени класса к любому элементу, и анимация воспроизводится без какого-либо JavaScript или настройки сборки.

1Как добавить CSS-анимации на свой сайт

Вся коллекция доступна через CDN. Вставляете эту строку в секцию head страницы — и каждая анимация из коллекции становится доступной немедленно.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">

После того как эта строка стоит на месте, вы применяете два имени класса к любому элементу. Первый класс, animate__animated, помечает элемент как анимированный. Второй класс называет конкретную анимацию, например animate__fadeIn или animate__bounce. Это можно поставить на заголовок, кнопку, картинку или любой другой HTML-элемент.

<h1 class="animate__animated animate__fadeInLeft">Добро пожаловать</h1>

В моей практике я обычно говорю агенту что-то вроде: «Используй коллекцию CSS-анимаций и сделай так, чтобы главный заголовок плавно появлялся слева, а основная кнопка слегка пульсировала.» Агент добавляет CDN-ссылку и правильные имена классов без каких-либо дополнительных инструкций, потому что уже знает эту коллекцию.

2Какие типы анимаций есть в коллекции

Коллекция организует свои анимации по группам. Что касается эффектов исчезновения и появления, есть fadeIn, fadeOut, fadeInLeft, fadeInRight, fadeInUp, fadeInDown и ещё несколько направлений. Есть также прыгающие анимации для входов и выходов, скользящие эффекты со всех четырёх сторон, и группа «привлекатели внимания» с эффектами вроде bounce, flash, pulse и shakeX. По скорости вы добавляете класс animate__slow чтобы анимация длилась две секунды, или animate__faster чтобы сократить её до 500 миллисекунд.

3Можно ли анимировать CSS без библиотек

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