# Crear una animación desde cero (/animate)

/animate es una skill de Claude Code de la sección Web y Diseño. La mantiene emilkowalski y se publica con licencia MIT. Decide si algo debe animarse y, si procede, escribe la animación con la curva, duración y propiedades adecuadas, con reduced motion incluido.

- Versión web: https://skills.sgomez.dev/es/s/animate
- Sección: [Web y Diseño](https://skills.sgomez.dev/es/web.md)
- Autor: emilkowalski
- Licencia: MIT
- Código: https://github.com/emilkowalski/skills/tree/d16ebe60d09a5ba2afcb7054ede9d0a10c9f6128/skills/animate
- Actualizada el 23 sept 2026

## Úsala cuando

- Quieres añadir movimiento a un componente, como una tarjeta, un menú o una transición
- Dudas de si algo debe animarse y quieres una decisión razonada
- Necesitas la animación con curva, duración y reduced motion ya resueltos

## No es para

- Criticar animaciones que ya existen, para eso está review-animations
- Auditar todo un código base, para eso está improve-animations

## Qué obtienes

El código de la animación, más unas pocas líneas con el resultado de la decisión (frecuencia y propósito), los ingredientes usados y qué comprobar a ojo.

## Cómo pedírselo

- `Añade una animación de entrada a esta tarjeta cuando aparece en pantalla`
- `Quiero que este menú se sienta más vivo al abrirse y cerrarse`
- `Crea una transición suave entre estas dos pantallas`

## Instalar

macOS · Linux:

```
curl -fsSL https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.sh | bash
```

Windows:

```
irm https://raw.githubusercontent.com/sgomez-dev/claude-skills/main/install.ps1 | iex
```


## Descripción del autor (traducida)

Construye una animación desde cero, tomando las decisiones en el orden que determina si se siente bien: si debe animarse siquiera, con qué propósito, qué herramienta, qué propiedades, qué curva y duración, cómo se interrumpe y cómo termina. Escribe la implementación. Úsalo cuando te pidan animar algo, añadir movimiento, dar vida a un componente o construir una transición. Para criticar una animación ya existente usa review-animations; para auditar todo un código base usa improve-animations.

## Preguntas sobre esta skill

### ¿Siempre escribe una animación?

No. Si la acción se repite cientos de veces al día, como un atajo de teclado, o no tiene un propósito claro, la habilidad lo dice y no escribe código. Ofrece una alternativa sin movimiento.

### ¿Incluye soporte para movimiento reducido?

Sí. El soporte para prefers-reduced-motion y el filtrado del hover para pantallas táctiles forman parte de la animación, no se dejan para después.

### ¿Sirve para apps de React Native?

No. Para apps Expo y React Native existe animate-expo; esta habilidad está pensada para la web.


- [Cómo revisamos esto](https://skills.sgomez.dev/es/methodology.md)