Zoom In
También llamado Scale In, Zoom In Up, Zoom In Down
El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.
Se usa en
Modales, lightboxes de imágenes, popovers
Variantes
- center
- down
- left
- right
- up
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 entrada "Zoom In" (también llamada scale in) en [dónde].
El elemento debe crecer de pequeño y transparente a su tamaño completo mientras aparece: rápido y suave, sin pasarse de tamaño.
Escálalo desde su centro sin afectar al diseño que lo rodea, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).Animaciones parecidas
A
Modal Scale-Fade In
También llamado Dialog open animation, Zoom-fade dialog
Un diálogo aparece mientras crece ligeramente desde su centro sobre una página oscurecida.
Se usa en
Diálogos de confirmación, formularios en superposición
Añade una animación "Modal Scale-Fade In" (también llamada dialog open animation o zoom-fade dialog) en [dónde].
El diálogo debe aparecer mientras crece ligeramente desde su centro y la página de detrás se oscurece: rápido y sutil, sin rebote.
Reprodúcela una vez cada vez que se abra el diálogo, mueve el foco a él y mantenlo dentro, y usa un simple fundido si el usuario prefiere movimiento reducido (prefers-reduced-motion).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
Back In
También llamado Back In Up, Back In Down
El elemento empieza reducido y desplazado, y luego entra deslizándose mientras crece hasta su tamaño completo.
Se usa en
Elementos hero y tarjetas
Añade una animación de entrada "Back In" (también llamada back in up o back in down) en [dónde].
El elemento debe llegar desde fuera de un borde, reducido y algo transparente, y crecer hasta su tamaño completo al alcanzar su sitio: un movimiento deliberado en dos pasos, no una aparición rápida.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).A
Pasa el ratón por encima
Grow
También llamado Scale Up, Zoom In on hover
El elemento se agranda ligeramente y con suavidad cuando el cursor está encima.
Se usa en
Botones, enlaces, miniaturas
Añade un efecto hover "Grow" (también llamado scale up) en [dónde].
El elemento debe agrandarse ligeramente y con suavidad mientras el cursor está encima, y volver a su tamaño cuando sale: rápido y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.Más en Entrance & Exit
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
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).