Animation Vocabulary

¿Qué hace Animation Vocabulary?

Convierte una descripción vaga de un movimiento o efecto en el término preciso, para que el usuario sepa qué solicitar.

Inicio rápido

El usuario describe un efecto de forma imprecisa. Devuelves el/los término(s) coincidentes en este formato:

**Escalonado** — Animar varios elementos uno tras otro con un pequeño retraso entre cada uno, creando una cascada.

Si varios términos encajan, lista el que mejor coincida primero, luego 1–2 alternativas con una nota de una línea sobre en qué se diferencian.

Instrucciones

1. Lee la intención, no las palabras clave. Los usuarios describen lo que ven o sienten ("elástico", "se desliza", "se dibuja solo"), no el nombre técnico. Relaciona la sensación con el glosario de abajo.
2. Cita el glosario textualmente. Sus descripciones son autoritarias — úsalas tal cual, no las parafrasees.
3. Desambigua términos cercanos. Cuando dos compitan (Clip-path vs Máscara, Aparecer vs Rebote, Transición de elemento compartido vs Animación de diseño), contrástalos para que el usuario pueda elegir.
4. Cuando no coincida exactamente, nombra el término más cercano y di claramente que es una aproximación, o describe el efecto con el vocabulario del glosario (por ejemplo, "eso es un escalonado de entradas con escala").
5. Mantente dentro de este glosario. Si un término realmente no está aquí, dilo en lugar de inventar uno — aunque puedes explicar el concepto usando estas palabras.
6. Sé conciso. Una pregunta de nomenclatura quiere un nombre, no un ensayo. Empieza con el término; amplía solo si te lo piden.

Ejemplos

Ejemplo 1 — basado en sensación Usuario: "¿Cómo se llama cuando un popover parece crecer desde el botón en el que hiciste clic en lugar de desde su centro?" Salida:

**Animación con origen** — Un elemento anima desde su desencadenante, como un popover que crece desde el botón que lo abrió en lugar de desde su propio centro, que es el comportamiento predeterminado en CSS.

Ejemplo 2 — desambiguación Usuario: "Eso de que una imagen se convierta en otra imagen." Salida:

**Morfismo** — Una forma se transforma suavemente en otra, p. ej. Dynamic Island.

Alternativas cercanas:
- **Fundido cruzado** — si simplemente se funden una sobre otra en el mismo lugar.
- **Transición de elemento compartido** — si un elemento viaja y se transforma de una posición a otra.

Ejemplo 3 — sensación física Usuario: "Ese scroll de iOS que resiste y vuelve cuando tiras demasiado." Salida:

**Efecto goma** — Resistencia y retroceso cuando arrastras más allá de un límite (la sensación de sobrescritura de iOS).

Glosario

Una instantánea curada que refleja la página /vocabulary del proyecto; mantenlas sincronizadas cuando una cambie.

Entradas y Salidas — cómo aparecen y desaparecen los elementos

• Aparición gradual / Desaparición gradual — El elemento aparece o desaparece cambiando la opacidad.
• Deslizar entrada — El elemento entra deslizándose desde fuera de la pantalla (izquierda, derecha, arriba o abajo).
• Escala entrada — El elemento crece de pequeño a tamaño completo al aparecer, a menudo combinado con un fundido.
• Aparecer — El elemento aparece con un ligero rebasamiento, como si rebotara hasta su lugar.
• Revelar — El contenido se descubre gradualmente, a menudo animando un clip-path o máscara.
• Entrar / Salir — La animación que reproduce un elemento cuando se añade o elimina de la pantalla.

Secuenciación y Temporización — coordinar múltiples elementos o momentos

• Fotogramas clave — Puntos definidos en una animación (0%, 50%, 100%) que el navegador rellena interpolando.
• Interpolación / Tween — Generar todos los fotogramas intermedios entre un valor inicial y final, para que el movimiento sea continuo.
• Escalonado — Animar varios elementos uno tras otro con un pequeño retraso entre cada uno, creando una cascada.
• Orquestación — Temporizar deliberadamente múltiples animaciones para que parezcan un movimiento coordinado.
• Retraso — Tiempo antes de que una animación comience.
• Duración — Cuánto dura una animación.
• Modo de relleno — Si un elemento mantiene los estilos de su primer o último fotograma antes de que comience la animación o después de que termine (p. ej., forwards).
• Animación por pasos — Una animación dividida en pasos discretos, como un contador regresivo.

Movimiento y Transformaciones — cambiar la posición, tamaño o ángulo de un elemento

• Trasladar — Mover un elemento a lo largo del eje X o Y.
• Escalar — Hacer un elemento más grande o más pequeño.
• Rotar — Girar un elemento alrededor de un punto.
• Sesgar — Inclinar un elemento a lo largo del eje X o Y, deformándolo de su forma rectangular.
• Inclinación 3D / Volteo — Rotar en el espacio 3D (rotateX / rotateY) para añadir profundidad.
• Perspectiva — Qué tan fuerte se ve el efecto 3D — un valor más bajo exagera la profundidad, como si el espectador estuviera más cerca.
• Origen de transformación — El punto de anclaje desde el que crece o gira una escala o rotación.
• Animación con origen — Un elemento anima desde su desencadenante, como un popover que crece desde el botón que lo abrió en lugar de desde su propio centro, que es el comportamiento predeterminado en CSS.

Transiciones Entre Estados — conectar un estado, vista o elemento con otro

• Fundido cruzado — Un elemento se desvanece mientras otro aparece en el mismo lugar.
• Transición de continuidad — Un cambio que mantiene al usuario orientado conectando visualmente el antes y el después. Por ejemplo, agrandar y encoger el mismo rectángulo.
• Morfismo — Una forma se transforma suavemente en otra, p. ej. Dynamic Island.
• Transición de elemento compartido — Un elemento viaja y se transforma de una posición a otra, como una miniatura que se expande en una tarjeta.
• Animación de diseño — Cuando el tamaño o la posición de un elemento cambia, anima hacia el nuevo lugar en lugar de saltar.
• Acordeón / Contraer — Una sección expande y contrae su altura suavemente para mostrar u ocultar contenido.
• Transición consciente de dirección — El contenido se desliza en un sentido al avanzar y en el opuesto al retroceder, dando una sensación de dirección a la navegación.

Desplazamiento — movimiento ligado al scroll o navegación entre vistas

• Revelar por scroll — Los elementos aparecen o se deslizan al entrar en el viewport.
• Animación impulsada por scroll — Una animación cuyo progreso está directamente ligado a la posición del scroll.
• Paralaje — El fondo y el primer plano se mueven a diferentes velocidades al hacer scroll, creando profundidad.
• Transición de página — Una animación que se reproduce al navegar de una página o ruta a otra.
• Transición de vista — El navegador transforma entre dos estados o páginas, conectando elementos compartidos.

Realimentación e Interacción — responder a las acciones del usuario

• Efecto hover — Cambio visual cuando el cursor pasa sobre un elemento.
• Realimentación de presión / Toque — Una sutil reducción de escala al hacer clic en un elemento, para que se sienta físico.
• Mantener para confirmar — Un efecto de progreso que se llena mientras el usuario mantiene pulsado un botón.
• Arrastrar — Mover un elemento agarrándolo, a menudo con inercia al soltarlo.
• Arrastrar para reordenar — Arrastrar elementos en una lista para reorganizarlos, mientras los demás se desplazan para hacer espacio.
• Deslizar para descartar — Arrastrar un elemento fuera de la pantalla para cerrarlo, como un cajón o un toast.
• Efecto goma — Resistencia y retroceso cuando arrastras más allá de un límite (la sensación de sobrescritura de iOS).
• Agitar / Bambolear — Una vibración rápida de lado a lado que indica un error o entrada rechazada.
• Onda — Un círculo que se expande desde el punto de un toque, confirmando la presión.

Easing — cómo cambia la velocidad durante una animación

• Easing — La velocidad a la que una animación acelera o desacelera.
• Salida suave — Comienza rápido, termina lento. El predeterminado para la mayoría de la interfaz y cualquier cosa que responda al usuario.
• Entrada suave — Comienza lento, termina rápido. Generalmente se evita; puede sentirse lento.
• Entrada y salida suave — Lento, rápido, lento. Bueno para elementos ya en pantalla que se mueven de A a B.
• Lineal — Velocidad constante. Evitar en IU; reservar para spinners o marquesinas.
• Bézier cúbico — Una curva de easing personalizada que defines para un control preciso.
• Easing asimétrico — Una curva que acelera y desacelera a diferentes ritmos. Se siente más viva que una simétrica.

Animaciones de Resorte — movimiento basado en física como alternativa al easing de duración fija

• Resorte — Movimiento impulsado por física (tensión, masa, amortiguación) en lugar de una duración fija.
• Rigidez / Tensión — Qué tan fuerte tira el resorte hacia su objetivo. Cuanto más alto, más rápido.
• Amortiguación — Qué tan rápido se estabiliza un resorte. Menor amortiguación significa más rebote y oscilación.
• Masa — Qué tan pesado se siente el elemento animado. Más masa lo hace más lento y más pesado.
• Rebote — Un resorte que sobrepasa y se estabiliza, añadiendo alegría.
• Duración percibida — Cuánto tiempo se siente que un resorte ha terminado, aunque siga micro-asentándose debajo.
• Inercia — Movimiento que lleva velocidad, especialmente después de un arrastre o interrupción.
• Velocidad — Qué tan rápido y en qué dirección se mueve un elemento. Un resorte la lleva a la siguiente animación cuando se interrumpe, así que un elemento lanzado mantiene su velocidad.
• Animación interrumpible — Una animación que se puede redirigir suavemente a mitad de camino en lugar de tener que terminar primero.

Bucle y Movimiento Ambiente — animaciones que se ejecutan solas

• Marquesina — Texto o contenido que se desplaza continuamente en un bucle.
• Bucle — Una animación que se repite, un número determinado de veces o infinitamente.
• Alternar (yoyo) — Un bucle que avanza y luego se invierte en cada iteración, en lugar de saltar al inicio.
• Órbita — Un elemento que gira alrededor de otro en una trayectoria continua.
• Pulso — Un suave cambio repetitivo de escala u opacidad para llamar la atención.
• Flotación — Un suave y continuo vaivén arriba y abajo que hace que un elemento estático se sienta vivo y sin peso.
• Animación de reposo — Movimiento sutil que se reproduce mientras un elemento está simplemente allí, esperando ser interactuado.

Pulido y Efectos — los pequeños detalles que separan lo bueno de lo excelente

• Desenfoque — Un filtro de desenfoque utilizado para suavizar un elemento o enmascarar pequeñas imperfecciones.
• Clip-path — Recortar un elemento a una forma, utilizado para revelados, máscaras y controles deslizantes de antes/después.
• Máscara — Ocultar o revelar partes de un elemento usando una forma o degradado — como clip-path, pero con bordes suaves y difuminables.
• Control deslizante antes / después — Un divisor arrastrable que barre entre dos imágenes superpuestas para compararlas.
• Dibujo de línea — Una ruta SVG que se dibuja a sí misma, como una pluma invisible trazándola.
• Morfismo de texto — Texto que anima carácter por carácter cuando cambia, atrayendo la atención al nuevo valor.
• Esqueleto / Brillo — Un marcador de posición con un brillo móvil que se muestra mientras el contenido se carga.
• Contador numérico — Dígitos que giran o cuentan hasta un valor.
• Números tabulares — Dígitos de ancho fijo para que los números no se desplacen al cambiar. Esencial para contadores, temporizadores y contadores.
• Máquina de escribir — Texto que aparece un carácter a la vez, como si se estuviera escribiendo.

Rendimiento — lo que mantiene el movimiento suave en lugar de entrecortado

• Tasa de fotogramas (FPS) — Fotogramas dibujados por segundo. 60fps es la base para un movimiento suave; 120fps en pantallas más nuevas.
• Entrecerramiento — Sacudida visible cuando el navegador pierde fotogramas porque no puede seguir el ritmo de la animación.
• Fotograma perdido — Un fotograma que el navegador no pudo dibujar a tiempo, causando un pequeño tropiezo en el movimiento.
• Composición — Dejar que la GPU mueva o desvanezca un elemento en su propia capa sin rehacer el diseño o la pintura.
• will-change — Una sugerencia CSS de que un elemento está a punto de animarse, para que el navegador lo promueva a su propia capa con antelación.
• Golpeteo de diseño — Animar propiedades como width, height, top o left que obligan al navegador a recalcular el diseño en cada fotograma, causando entrecerramiento.

Principios a Conocer — conceptos que guían cuándo y cómo animar

• Animación con propósito — El movimiento debe servir una función — orientar, dar realimentación, mostrar relaciones — no solo decorar.
• Anticipación — Un pequeño movimiento de preparación en la dirección opuesta antes de un movimiento, insinuando lo que está a punto de suceder.
• Seguimiento — Partes de un elemento continúan moviéndose y se estabilizan ligeramente después de que el movimiento principal se detiene, añadiendo peso.
• Aplastar y estirar — Deformar un elemento mientras se mueve para transmitir peso, velocidad y flexibilidad.
• Rendimiento percibido — La animación correcta hace que una interfaz se sienta más rápida, incluso cuando no lo es.
• Frecuencia de uso — Cuanto más a menudo vea un usuario una animación, más corta y sutil debe ser.
• Consistencia espacial — Animar para que un elemento mantenga su identidad y posición a través de los estados, para que los usuarios nunca pierdan el rastro de dónde fueron las cosas.
• Aceleración por hardware — Animar transform y opacity permite que la GPU mantenga el movimiento suave.
• Movimiento reducido — Respetar la configuración prefers-reduced-motion del usuario reduciendo o eliminando el movimiento.