Back Out
El elemento se encoge y se desliza hacia un borde mientras desaparece.
Se usa en
Descartar tarjetas
Variantes
- up
- down
- left
- right
Prompt
Sustituye [dónde] por la parte de tu página y pega el prompt en tu agente de IA. Cada prompt incluye el nombre de la animación, así la próxima vez puedes pedirla solo por su nombre.
Añade una animación de salida "Back Out" en [dónde].
El elemento debe encogerse un poco en su sitio y luego deslizarse hacia un borde mientras desaparece: una salida deliberada en dos pasos, no un simple desvanecimiento rápido.
Quita el elemento solo cuando termine la animación para que el diseño no salte a mitad del movimiento, y quítalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
A
El elemento rebota ligeramente y luego se encoge o sale volando por un borde.
Se usa en
Cierres con un toque divertido
Añade una animación de salida "Bounce Out" en [dónde].
El elemento debe hundirse un poco, crecer algo más allá de su tamaño y luego encogerse mientras desaparece: corto y elástico.
Quítalo del diseño solo cuando termine la animación, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Zoom Out
También llamado Scale Out
El elemento se encoge y se desvanece hasta desaparecer.
Se usa en
Cierre de modales y descarte de elementos
Añade una animación de salida "Zoom Out" (también llamada scale out) en [dónde].
El elemento debe encogerse hacia su centro mientras se desvanece hasta desaparecer: rápido, acelerando al irse.
Quítalo del diseño y del foco del teclado solo cuando haya desaparecido, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Slide Out
También llamado Slide Out Up, Slide Out Down
El elemento se desliza más allá del borde de un contenedor y desaparece.
Se usa en
Cierre de cajones y paneles
Añade una animación de salida "Slide Out" (también llamada slide out up o slide out down) en [dónde].
El elemento debe deslizarse más allá del borde de su contenedor y desaparecer, sin perder opacidad: rápido, acelerando al irse.
Recórtalo en el borde del contenedor, ocúltalo al teclado y a los lectores de pantalla cuando ya no esté a la vista, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Fade Out Directional
También llamado Fade Out Up, Fade Out Down
El elemento desaparece mientras se desplaza en una dirección.
Se usa en
Descartar notificaciones y tarjetas
Añade una animación de salida "Fade Out Directional" (también llamada fade out up o fade out down) en [dónde].
El elemento debe desaparecer mientras se desplaza una distancia corta en una dirección: rápido, acelerando al salir.
Quítalo del diseño solo cuando termine el desvanecimiento para que el contenido vecino no salte antes de tiempo, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).Más en Entrance & Exit
ABCD
Blur In
También llamado Slide In Blurred, Text Focus In, Focus In, Blur Text Reveal
El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.
Se usa en
Titulares y textos hero que se revelan
Añade una animación de entrada "Blur In" (también llamada text focus in, focus in o blur text reveal) en [dónde].
El contenido debe empezar muy desenfocado y transparente, y luego enfocarse en su sitio: suave y más bien lento, sin desplazamiento.
Reprodúcela una sola vez y muestra el texto nítido de inmediato si el usuario prefiere movimiento reducido (prefers-reduced-motion).ABCD
Blur Out
También llamado Text Blur Out, Slide Out Blurred, Smoky Text Dissipate
El elemento se desenfoca progresivamente mientras desaparece o se desliza fuera.
Se usa en
Transiciones suaves y salidas de texto
Añade una animación de salida "Blur Out" (también llamada text blur out o smoky text dissipate) en [dónde].
El contenido debe desenfocarse cada vez más mientras desaparece en su sitio: suave y más bien lento, como si se disolviera.
Oculta o quita el elemento solo cuando termine el desenfoque, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Bounce In
También llamado Bounce In Down, Bounce In Up
El elemento entra con un rebote que se pasa y se asienta, ya sea creciendo o cayendo desde un borde.
Se usa en
Insignias de notificación y modales divertidos
Añade una animación de entrada "Bounce In" (también llamada bounce in down o bounce in up) en [dónde].
El elemento debe crecer desde pequeño, pasarse de su tamaño completo y tambalearse unas cuantas veces antes de asentarse: rápido y elástico.
Reprodúcela una sola vez para que no siga llamando la atención, y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).