Hinge

El elemento se balancea de un lado a otro desde su borde superior, como un péndulo cuya amplitud se va reduciendo.

Añade un efecto de atención "Swing" en [dónde].
El elemento debe balancearse de un lado a otro como un cartel colgante, empezando con un vaivén amplio que se apaga rápido.
Haz que pivote desde su borde superior y no desde el centro, y reprodúcelo una vez al activarse.

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