Bounce Out
El elemento rebota ligeramente y luego se encoge o sale volando por un borde.
Se usa en
Cierres con un toque divertido
Variantes
- center
- down
- up
- 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 "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).Animaciones parecidas
A
El elemento se encoge y se desliza hacia un borde mientras desaparece.
Se usa en
Descartar tarjetas
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).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
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).Más en Entrance & Exit
A
Clip Reveal
También llamado Image Reveal, Mask Reveal, Clip-path Reveal, Wipe Reveal
Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.
Se usa en
Revelado de imágenes y titulares
Añade un efecto de entrada "Clip Reveal" (también llamado mask reveal, wipe reveal o image reveal) en [dónde].
Un borde de recorte debe barrer de izquierda a derecha para ir descubriendo el contenido mientras este permanece quieto: fluido, con inicio y final suaves.
Reserva el espacio del elemento desde el principio para que nada se mueva, y muéstralo descubierto por completo si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Fade In / Fade Out
También llamado Fade
El elemento pasa de totalmente transparente a totalmente opaco en su sitio, o al revés al salir.
Se usa en
Modales, toasts y contenido de página que aparece
Añade una animación "Fade In / Fade Out" (también llamada fade) en [dónde].
El elemento debe pasar de totalmente transparente a totalmente visible en su sitio al aparecer, y desvanecerse igual al salir: suave, sin desplazamiento ni cambio de escala.
Cuando haya desaparecido, asegúrate de que ya no se pueda hacer clic en él ni llegar con el teclado, y cambia al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Fade In Directional
También llamado Fade In Down, Fade In Left, Fade In Right
El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.
Se usa en
Secciones y tarjetas que aparecen al cargar o al hacer scroll
Añade una animación de entrada "Fade In Directional" (también llamada fade in left, fade in right o fade in down) en [dónde].
El elemento debe aparecer mientras se desplaza una distancia corta desde un lado hasta su posición final: rápido y fluido, frenando al llegar, sin rebote.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).