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
Variantes
- fade only
- slide out
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 "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).Animaciones parecidas
A
Puff In / Puff Out
También llamado Puff
El elemento se reduce desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo, o al revés al salir.
Se usa en
Aparición suave de objetos
Añade una animación "Puff In / Puff Out" (también llamada puff) en [dónde].
Al aparecer, el elemento debe reducirse desde un estado grande, borroso y transparente hasta quedar nítido, como una bocanada de humo que se asienta; al salir, debe volver a hincharse en un desenfoque y desvanecerse: suave y bastante rápido.
Evita que el estado agrandado empuje el diseño o genere barras de desplazamiento, y cambia 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).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).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).Más en Entrance & Exit
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).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
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).