Entrance & Exit

El elemento empieza reducido y desplazado, y luego entra deslizándose mientras crece hasta su tamaño completo.

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).

El elemento se encoge y se desliza hacia un borde mientras desaparece.

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).

El elemento empieza muy desenfocado y se va enfocando, a menudo mientras se desliza o aparece.

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).

El elemento se desenfoca progresivamente mientras desaparece o se desliza fuera.

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).

El elemento entra con un rebote que se pasa y se asienta, ya sea creciendo o cayendo desde un borde.

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).

El elemento rebota ligeramente y luego se encoge o sale volando por un borde.

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).

Un clip-path o una máscara crece desde un borde o un punto y va descubriendo la imagen o el texto.

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).

El elemento pasa de totalmente transparente a totalmente opaco en su sitio, o al revés al salir.

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).

El elemento aparece mientras se desplaza una distancia corta desde un lado hasta su posición final.

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).

El elemento desaparece mientras se desplaza en una dirección.

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).

El elemento sube una distancia corta mientras aparece, como si se asentara en su lugar.

Añade una animación de entrada "Fade Up" (también llamada fade-in-up o reveal on scroll) en [dónde].
Los elementos deben subir ligeramente mientras aparecen la primera vez que entran en pantalla al hacer scroll: sutil y rápido, sin rebote.
Reprodúcela una sola vez y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se enciende con destellos rápidos de opacidad, como un letrero de neón averiado, antes de quedarse visible.

Añade una animación de entrada "Flicker In" en [dónde].
El elemento debe encenderse y apagarse unas cuantas veces a intervalos irregulares, como un letrero de neón averiado, antes de quedarse encendido: destellos secos, sin desplazamiento.
Reprodúcela una sola vez, con pocos destellos y lo bastante lentos para no afectar a personas sensibles a las luces intermitentes, y muéstralo encendido de forma fija si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento da una vuelta completa sobre el eje Y mientras se acerca un poco al espectador y vuelve.

Añade una animación "Flip" en [dónde].
El elemento debe dar una vuelta completa sobre su eje vertical mientras se acerca un poco al espectador, y luego volver con una leve reducción de tamaño: vivo pero breve.
Dale perspectiva para que el giro se lea como profundidad, reprodúcela una sola vez en lugar de en bucle, y omite el giro si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira en 3D sobre su eje horizontal o vertical, de estar de canto a quedar de frente al espectador.

Añade una animación de entrada "Flip In" (también llamada flip in X o flip in Y) en [dónde].
El elemento debe empezar de canto y girar sobre su eje horizontal hasta quedar de frente, pasándose un poco y volviendo antes de asentarse: rápido, con un pequeño bamboleo.
Dale perspectiva para que el giro se lea como profundidad, y muéstralo de frente sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira en 3D hasta quedar de canto e invisible.

Añade una animación de salida "Flip Out" (también llamada flip out X o flip out Y) en [dónde].
El elemento debe inclinarse un poco hacia atrás y luego girar sobre su eje vertical hasta quedar de canto y desaparecer: rápido y nítido.
Dale perspectiva para que el giro se lea como profundidad, quita el elemento solo cuando termine el giro, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira sobre una bisagra en la esquina superior izquierda, se balancea y luego cae fuera de la pantalla.

Añade una animación de salida "Hinge" en [dónde].
El elemento debe descolgarse desde su esquina superior izquierda como si se hubiera soltado un tornillo, balancearse de un lado a otro y luego caer fuera de la pantalla mientras desaparece: lento, cómico y deliberado.
Deja que caiga por encima del resto del contenido sin empujar el diseño ni añadir barras de desplazamiento, quítalo cuando haya caído, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento surge desde un estado pequeño y girado, se pasa y se asienta como un muñeco sorpresa de resorte.

Añade una animación de entrada "Jack In The Box" en [dónde].
El elemento debe surgir desde un estado diminuto e inclinado, anclado en su borde inferior, balancearse de lado a lado pasando de la vertical y asentarse: elástico y divertido.
Reprodúcela una sola vez y muestra el elemento en su lugar sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra disparado desde un lado con una inclinación que se endereza al llegar.

Añade una animación de entrada "Light Speed In" (también llamada lightspeed in) en [dónde].
El elemento debe entrar muy rápido desde un lado, inclinado como si fuera a toda velocidad, corregir de más la inclinación una vez y enderezarse al llegar: rápido e impactante, frenando al final.
Evita que genere una barra de desplazamiento horizontal mientras sigue fuera de la pantalla, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se inclina y sale disparado hacia un lado mientras se desvanece.

Añade una animación de salida "Light Speed Out" (también llamada lightspeed out) en [dónde].
El elemento debe inclinarse y salir disparado hacia un lado mientras se desvanece: rápido, acelerando al irse.
Evita que genere una barra de desplazamiento horizontal al cruzar el borde, y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

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.

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).

El elemento entra rodando desde la izquierda como una rueda mientras aparece.

Añade una animación de entrada "Roll In" en [dónde].
El elemento debe entrar rodando desde la izquierda como una rueda, girando mientras avanza, a la vez que aparece: suave, frenando al llegar.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento sale rodando hacia la derecha mientras se desvanece.

Añade una animación de salida "Roll Out" en [dónde].
El elemento debe salir rodando hacia la derecha como una rueda, girando mientras avanza, a la vez que se desvanece: suave, acelerando al irse.
Quítalo del diseño solo cuando haya terminado de rodar y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento entra girando alrededor de una esquina o de su centro mientras aparece.

Añade una animación de entrada "Rotate In" (también llamada rotate in down left) en [dónde].
El elemento debe girar hasta su sitio alrededor de su esquina inferior izquierda, partiendo de un ángulo inclinado, mientras aparece: suave y sin prisa, frenando al asentarse.
Reprodúcela una sola vez y muestra el elemento en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira alrededor de un punto de pivote mientras se desvanece.

Añade una animación de salida "Rotate Out" en [dónde].
El elemento debe girar sobre su centro, algo más de media vuelta, mientras se desvanece: suave, acelerando al irse.
Quítalo solo cuando termine el giro y ocúltalo al instante si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desliza desde fuera del borde de su contenedor hasta su posición de reposo, sin desvanecerse.

Añade una animación de entrada "Slide In" (también llamada slide in left, slide in right, slide in up o slide in down) en [dónde].
El elemento debe deslizarse desde más allá del borde de su contenedor hasta su sitio, totalmente opaco todo el tiempo: rápido, frenando con suavidad y sin rebote.
Recórtalo en el borde del contenedor para que no se superponga a los elementos vecinos ni genere barras de desplazamiento mientras está fuera, y muéstralo en su sitio si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento se desliza más allá del borde de un contenedor y desaparece.

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).

Los elementos de un grupo se animan uno tras otro con un pequeño retraso, formando una ola en lugar de aparecer todos a la vez.

Añade una animación "Stagger" (también llamada staggered animation o cascada) en [dónde].
Los elementos deben aparecer subiendo uno tras otro con un retraso corto y uniforme, para que el grupo se vea como una ola rápida y no todos a la vez.
Mantén la secuencia breve aunque la lista sea larga, reprodúcela una sola vez al entrar en pantalla y omite el movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento gira y crece desde un punto mientras aparece.

Añade una animación de entrada "Swirl In" (también llamada swirl in forward) en [dónde].
El elemento debe girar bastante más de una vuelta completa mientras crece desde un solo punto hasta su tamaño completo y aparece: rápido al principio, frenando al asentarse.
Reprodúcela una sola vez en un único elemento en lugar de en todo un grupo, y muéstralo en su sitio sin movimiento si el usuario prefiere movimiento reducido (prefers-reduced-motion).

Las letras empiezan muy separadas y tenues, y se juntan hasta el espaciado normal mientras aparecen.

Añade una animación de texto "Tracking In" (también llamada text tracking in o letter-spacing in) en [dónde].
Las letras deben empezar muy separadas y tenues, y juntarse hasta el espaciado normal mientras se vuelven totalmente visibles: suave, frenando al final.
Mantén el texto centrado y en una sola línea mientras cambia el espaciado para que el diseño de alrededor no se mueva, y muéstralo con el espaciado normal si el usuario prefiere movimiento reducido (prefers-reduced-motion).

El elemento crece desde un estado pequeño y transparente hasta su tamaño completo mientras aparece.

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).

El elemento se encoge y se desvanece hasta desaparecer.

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).