Готовые CSS-анимации, которые легко отдать нейросети. Разбор репозитория transitions.dev
Каждый раз, когда я прошу нейросеть сделать плавную анимацию для выпадающего меню или модального окна, происходит одно и то же. AI пишет полсотни строк тяжелого JS-кода с использованием тяжелых библиотек вроде Framer Motion или зашивает кривые inline-стили, которые рассыпаются при первом изменении размера экрана. Хочется нормального решения: три-четыре строчки чистого CSS, которые сходу учитывают системные настройки доступности.
Проект transitions.dev решает именно эту задачу. Разработчик Якуб Анталик собрал коллекцию стандартных микроанимаций для веб-интерфейсов и упаковал их так, чтобы ими было удобно пользоваться и людям, и AI-ассистентам вроде Cursor или Claude Code.
Что внутри каталога
На сайте проекта вы найдете витрину готовых CSS-переходов. Вы кликаете на карточку, смотрите анимацию в действии и сразу забираете готовый фрагмент кода. Никаких внешних библиотек, лишних оберток и специфичной верстки.
В репозитории собраны привычные паттерны интерфейсов:
- Изменение размера карточки
- Появление цифр с легким размытием
- Всплывание уведомления с эффектом пружины
- Анимация подмены иконки при клике
- Тряска формы при ошибке валидации
- Плавное смещение аватарок при наведении
Все CSS-фрагменты завязаны на CSS variables внутри :root, классы с префиксом t-* и встроенную проверку @media (prefers-reduced-motion: reduce). Благодаря этому код легко встраивается в любой существующий проект и не ломает доступность для пользователей, отключающих анимацию в системе.
Три способа забрать стили в проект
Свои заготовки автор распространяет не только через сайт. Работать с библиотекой можно так, как удобно вам.
Первый вариант — ручной копипаст с интерактивного стенда. Заходите на сайт, жмете кнопку Copy CSS и вставляете стили в свой файл.
Второй вариант — консольная утилита. Если не хочется переключаться в браузер, запустите команду через npx:
npx transitions-pro add card-resize
Скрипт загрузит нужный CSS-файл прямо в папку проекта.
Третий вариант — интеграция с AI-инструментами. Это, пожалуй, самая интересная часть проекта. Автор оформил всю коллекцию как плагин для нейросетей, так называемый agent skill. Подключить его в окружение можно одной командой:
npx skills add Jakubantalik/transitions.dev
После этого Cursor, Claude Code или Codex перестанут генерировать случайно написанный CSS. Они начнут бережно применять готовые токены движения из базы знаний skills/transitions-dev/. Внутри скилла лежат файлы с инструкциями под каждый тип анимации, которые автоматически собираются из основного кода с помощью скрипта build/extract.mjs.
Настройка анимаций в реальном времени с Refine
Автор пошел дальше и написал утилиту transitions-refine. Инструмент добавляет плавающую панель с таймлайном поверх вашего работающего веб-приложения.
Запустить инспектор можно командой:
npx transitions-refine live --llm
Прямо на странице появляется виджет. Вы выделяете любой элемент, жмете кнопку, и локальный релей вместе с нейросетью предлагает варианты оптимизации анимации. Все изменения подставляются на лету как обратимые оверлеи. Если результат не понравился, правку можно сразу отменить.
Как устроен репозиторий
Исходники проекта выглядят очень компактно и не перегружены инструментарием.
index.htmlслужит главной витриной и хранит исходные шаблоны анимацийprototypes.htmlработает как песочница, где можно вручную покрутить длительность, задержки и easing-функцииskills/transitions-dev/хранит сгенерированные файлы инструкций для AIrefine/содержит код CLI-инспектора и локального сервера
Для запуска проекта локально не нужны Node-сборщики. Достаточно встроенного сервера Python:
python3 -m http.server 8765
Кому пригодится проект
Перед тем как внедрять стили в рабочий проект, обратите внимание на лицензию. В метаданных GitHub она пока не указана, хотя код полностью открыт. Кроме того, часть продвинутых пресетов в CLI требует бесплатной авторизации через браузер.
Библиотека точно понравится фронтендерам, которым надоело каждый раз заново верстать плавающие меню и модальные окна. Но максимальную пользу от репозитория получат те, кто активно пишет код в паре с AI-ассистентами. Подключив этот скилл, вы раз и навсегда научите нейросеть писать чистые и предсказуемые CSS-анимации.
