# Transitions.dev By **jakubantalik** · Software & Tools Una colección interactiva de transiciones CSS reutilizables y listas para copiar: redimensionado de tarjetas, animaciones de modales y menús, aparición de insignias y más, cada una con un fragmento autocontenido que incluye una protección para movimiento reducido. - 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 - Transiciones CSS reutilizables y listas para copiar para patrones de interfaz de usuario comunes - Fragmentos autocontenidos que usan propiedades personalizadas CSS y clases `t-*` - Protección integrada de `prefers-reduced-motion` en cada fragmento - Instalable como habilidad de agente para Cursor, Claude Code y Codex - Playground interactivo para ajustar duraciones, distancias y funciones de temporización - La habilidad se mantiene sincronizada con la exhibición mediante un paso de compilación --- Transitions.dev es una colección interactiva de transiciones CSS reutilizables. Cada tarjeta del sitio de exhibición demuestra un patrón de interacción distinto: redimensionado de tarjeta, aparición de número, insignia de notificación, cambios de estado de texto, apertura y cierre de menú y modal, revelado de panel, transiciones de página, intercambio de iconos, marca de éxito, hover de grupo de avatares y sacudida de estado de error, y viene con un fragmento autocontenido listo para copiar. Los fragmentos usan propiedades personalizadas CSS semánticas en `:root`, reglas de transición con espacios de nombres bajo clases `t-*` y una protección `prefers-reduced-motion`, de modo que puedes pegarlo en cualquier proyecto y aplicarlo a cualquier componente sin arrastrar el marcado o el tamaño específicos de la demo. Las mismas dieciocho transiciones también están empaquetadas como una habilidad de agente instalable (`npx skills add Jakubantalik/transitions.dev`) para que herramientas de codificación con IA como Cursor, Claude Code y Codex puedan aplicarlas directamente dentro de tu proyecto. Un paso de compilación regenera la habilidad a partir del `index.html` de la exhibición, manteniendo los fragmentos publicados sincronizados con lo que demuestra el sitio, y un playground interactivo te permite ajustar duraciones, distancias y funciones de temporización. ## FAQ ### ¿Cómo uso una transición? Copia el fragmento CSS autocontenido de una tarjeta en transitions.dev y pégalo en tu proyecto; usa clases `t-*` con espacio de nombres y propiedades personalizadas CSS, por lo que se aplica a cualquier componente sin marcado específico de la demo. ### ¿Puede usarlo mi agente de codificación? Sí. Las transiciones están empaquetadas como una habilidad de agente instalable (`npx skills add Jakubantalik/transitions.dev`) que Cursor, Claude Code y Codex pueden aplicar directamente. ### ¿Respeta el movimiento reducido? Sí. Cada fragmento incluye una protección `prefers-reduced-motion: reduce`. --- [View on Analog](https://analoghq.ai/es/jakubantalik/software-tools/transitions-dev)