Shrink

El elemento se hunde hacia dentro y vuelve, como si se pulsara un botón físico.

Añade un efecto hover "Push" en [dónde].
Cada vez que entre el puntero, el elemento debe encogerse una vez rápidamente y recuperar su tamaño normal con un rebote, como si se pulsara un botón físico.
Reprodúcelo una vez por hover en lugar de repetirlo en bucle, y evita que el diseño de alrededor se desplace.

El elemento se encoge un poco mientras se pulsa y vuelve con un rebote al soltarlo.

Añade un efecto "Press (Button Tap Scale)" (también llamado tap feedback o press state) en [dónde].
Mientras se pulsa, el elemento debe encogerse un poco y oscurecerse ligeramente, y al soltarlo volver a su tamaño con un pequeño rebote: rápido y sutil.
Muestra la misma respuesta al pulsar con el teclado y con el dedo, y evita que el diseño de alrededor se mueva.

Al pasar el cursor, el elemento baja unos píxeles, como si se hundiera en la página.

Añade un efecto hover "Sink" en [dónde].
El elemento debe bajar un poco y quedarse ahí mientras el cursor está encima, como si se hundiera en la página, y volver a subir cuando sale: suave, sin rebote.
Muévelo solo visualmente sin desplazar el diseño de alrededor y muestra el mismo efecto con el foco del teclado.

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

Al pasar el cursor, el fondo se abre o se cierra como unas persianas desde el centro o desde los bordes.

Añade un efecto hover "Shutter Fill" (también llamado shutter) en [dónde].
El nuevo color de fondo debe abrirse desde una línea vertical en el centro hacia ambos lados, como unas persianas, y cerrarse de nuevo hacia el centro cuando el cursor sale, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el relleno recortado dentro del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.

El elemento se inclina de lado al pasar el cursor.

Añade un efecto hover "Skew" en [dónde].
El elemento debe inclinarse de lado hasta quedar ligeramente sesgado mientras el cursor está encima, y enderezarse cuando sale: rápido y suave.
Mantén el texto legible mientras está inclinado, evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.