jakubantalik/transitions.dev
Developer toolsЭта страница переведена автоматически. Технические детали смотрите в оригинале. Открыть оригинал
Сборник самых важных переходов для веб-приложений, навыков для агентов и инструмента Refine для агентов
Обзор
Transitions.dev — это интерактивная коллекция многоразовых переходов CSS. Каждая карта на странице индекса демонстрирует разный паттерн взаимодействия и поставляет готовый к копированию портативный CSS-фрагмент для каждой. На каждой карте есть кнопка копирования, которая выпускает самостоятельный CSS-фрагмент: semantic CSS custom properties on :root, правила перехода, расположенные под t-* классами, и @media (предпочитает уменьшенное движение: reduce) защита — так что вы можете вставить фрагмент в любой проект и применить его к любому компоненту без добавления разметки или размеров, специфичных для демо. Те же восемнадцать переходов упакованы как навык устанавливаемого агента, чтобы инструменты кодирования ИИ (Cursor, Claude Code, Codex и др.) могли применять их непосредственно внутри вашего проекта. Источник навыков живёт в навыках/transitions-dev/ — SKILL.md, восемнадцати файлах на каждый переход (01-card-resize.md ... 18-texts-reveal.md), и _root.css (универсальный блок установки сам по себе). Навык генерируется из индекса.
Обзор (машинный перевод)
Transitions.dev — это интерактивная коллекция многоразовых переходов CSS. Каждая карта на странице индекса демонстрирует разный паттерн взаимодействия и поставляет готовый к копированию портативный CSS-фрагмент для каждой.
Живой сайт: https://transitions.dev/
Переходы
| # | Имя | Что оно показывает |
|---|---|---|
| 1 | Изменение размера карты | Плавный переход при изменении размера карты. |
| 2 | Всплывающий номер | Переворот цифры с размытием и пошатыванием. |
| 3 | Значок уведомления | Диагональный слайд с пружинным всплывом. |
| 4 | Смена состояний текста | Переход между текстом с размытием. |
| 5 | Выпадающее меню | Переход при открытии/закрытии с учётом происхождения. |
| 6 | Модальное открытие / закрытие | Модальный переход с масштабом. |
| 7 | Открытие панели | Переход между открытием и закрытием панели. |
| 8 | Страница бок о бок | Переход вперёд на заднюю страницу. |
| 9 | Смена иконок | Смена иконок масштабирования и размытия. |
| 10 | Проверка успеха | Иконка подтверждения с затуханием, поворотом, размытием, Y-bob и SVG-отрисовкой пути. |
| 11 | Группа аватара зависает | Парящий аватар всплывает, а соседи следуют за ним с падением. |
| 12 | Встряхивание состояния ошибки | Встряхивание при ошибке проверки с авторевернтом в нейтральное положение. |
Эта страница переведена автоматически. Технические детали смотрите в оригинале.
README
Показан фрагмент оригинального README. Открыть оригинал.
Transitions.dev
Transitions.dev is an interactive collection of reusable CSS transitions. Each card on the index page demonstrates a different interaction pattern and ships a copy-ready, portable CSS snippet for each.
Live site: https://transitions.dev/
Transitions
| # | Name | What it shows |
|---|---|---|
| 1 | Card resize | Smooth card resize transition. |
| 2 | Number pop-in | Digit flip with blur and stagger. |
| 3 | Notification badge | Diagonal slide with spring pop-in. |
| 4 | Text states swap | Text swap transition with blur. |
| 5 | Menu dropdown | Origin-aware open / close transition. |
| 6 | Modal open / close | Modal transition with scale. |
| 7 | Panel reveal | Panel open / close transition. |
| 8 | Page side-by-side | Forward / back page transition. |
| 9 | Icon swap | Scale and blur icon swap. |
| 10 | Success check | Confirmation icon with fade, rotate, blur, Y-bob, and SVG path draw. |
| 11 | Avatar group hover | Hovered avatar springs up while neighbours follow with a falloff. |
| 12 | Error state shake | Input shake on validation error with auto-revert to neutral. |
Each card has a copy button that emits a self-contained CSS snippet: semantic CSS custom properties on :root, the transition rules namespaced under t-* classes, and a @media (prefers-reduced-motion: reduce) guard — so you can paste the snippet into any project and apply it to any component without pulling in demo-specific markup or sizing.
Install with the CLI (npm)
Pull any transition into your project from the terminal — no manual copy:
npx transitions-dev add card-resize # free, no account needed
npx transitions-dev add --free # every free transition at once
npx transitions-dev list # see everything available
Pro transitions unlock after a passwordless browser sign-in (device flow — no API key in your terminal):
npx transitions-dev login # opens the browser to confirm a code
npx transitions-dev add confetti-burst # pulls the Pro CSS + React
CLI source: cli/ (published as the public transitions-dev package; transitions-pro is the old name and forwards to it — it holds no premium source; Pro recipes are fetched from the authenticated API).
Use as an agent skill
The same transitions are packaged as an installable agent skill so AI coding tools (Cursor, Claude Code, Codex, …) can apply them directly inside your project.
npx skills add Jakubantalik/transitions.dev
Skill source lives in skills/transitions-dev/ — SKILL.md, eighteen per-transition reference files (01-card-resize.md … 18-texts-reveal.md), and _root.css (the universal install block on its own).
Рекомендуемые инструменты
Попробуйте другой запрос или уберите фильтр.
Установка
npx skillfish add jakubantalik/transitions.dev