# Transitions.dev

By **jakubantalik** · Software & Tools

Uma coleção interativa de transições CSS reutilizáveis e prontas para copiar, incluindo redimensionamento de cards, animações de modais e menus, pop de badges e muito mais, cada uma emitindo um snippet autocontido com um guard de reduced-motion.

- Source: https://transitions.dev/
- Repository: https://github.com/Jakubantalik/transitions.dev
- Tags: css, animation, ui, open-source, agent-skill, react, cli, copy-paste
- Pricing: free
- Upvotes: 0

## Features

- Transições CSS reutilizáveis e prontas para copiar para padrões comuns de UI
- Snippets autocontidos utilizando custom properties do CSS e classes `t-*`
- Guard de `prefers-reduced-motion` integrado em cada snippet
- Instalável como agent skill para Cursor, Claude Code e Codex
- Playground interativo para ajustar durações, distâncias e easings
- A skill se mantém em sincronia com o showcase por meio de um passo de build

---

Transitions.dev é uma coleção interativa de transições CSS reutilizáveis. Cada card no site de demonstração apresenta um padrão de interação diferente: redimensionamento de card, pop-in de número, badge de notificação, troca de estado de texto, abertura e fechamento de menu e modal, revelação de painel, transições de página, troca de ícones, check de sucesso, hover de grupo de avatares e shake de estado de erro, e disponibiliza um snippet autocontido pronto para copiar. Os snippets utilizam custom properties semânticas do CSS em `:root`, regras de transição com namespace em classes `t-*` e um guard `prefers-reduced-motion`, permitindo que você cole qualquer um deles em qualquer projeto e o aplique a qualquer componente sem precisar arrastar markup ou dimensionamento específicos da demo.

As mesmas dezoito transições também estão empacotadas como uma agent skill instalável (`npx skills add Jakubantalik/transitions.dev`), para que ferramentas de codificação com IA como Cursor, Claude Code e Codex possam aplicá-las diretamente no seu projeto. Um passo de build regenera a skill a partir do `index.html` do showcase, mantendo os snippets publicados em sincronia com o que o site demonstra, e um playground interativo permite ajustar durações, distâncias e easings.

## FAQ

### Como uso uma transição?

Copie o snippet CSS autocontido de um card em transitions.dev e cole no seu projeto; ele utiliza classes `t-*` com namespace e custom properties do CSS, portanto se aplica a qualquer componente sem markup específico da demo.

### Meu agente de codificação pode usá-lo?

Sim. As transições estão empacotadas como uma agent skill instalável (`npx skills add Jakubantalik/transitions.dev`) que Cursor, Claude Code e Codex podem aplicar diretamente.

### Ele respeita o reduced motion?

Sim. Cada snippet inclui um guard `prefers-reduced-motion: reduce`.

---
[View on Analog](https://analoghq.ai/pt-br/jakubantalik/software-tools/transitions-dev)