Fade Out Directional

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

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