Push
El elemento se hunde hacia dentro y vuelve, como si se pulsara un botón físico.
Se usa en
Botones
Variantes
- Push
- Icon Push
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 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.Animaciones parecidas
A
Haz clic
Press (Button Tap Scale)
También llamado Tap feedback, Active scale, Press state
El elemento se encoge un poco mientras se pulsa y vuelve con un rebote al soltarlo.
Se usa en
Botones, tarjetas
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.A
Pasa el ratón por encima
Al pasar el cursor, el elemento baja unos píxeles, como si se hundiera en la página.
Se usa en
Botones
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.A
Pasa el ratón por encima
Shrink
También llamado Scale Down
El elemento se reduce ligeramente y con suavidad cuando el cursor está encima.
Se usa en
Botones, mosaicos
Añade un efecto hover "Shrink" (también llamado scale down) en [dónde].
El elemento debe reducirse 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 Hover
A
Pasa el ratón por encima
Radial Fill
También llamado Circle expand
Al pasar el cursor, un círculo de color crece desde el centro o se contrae hacia él para rellenar el elemento.
Se usa en
Botones
Añade un efecto hover "Radial Fill" (también llamado circle expand) en [dónde].
Un círculo del nuevo color debe crecer suavemente desde el centro hasta llenar el elemento, y encogerse de vuelta hacia el centro cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible.
Mantén el círculo recortado dentro de la forma del elemento y el texto por encima, y muestra el mismo efecto con el foco del teclado.A
Pasa el ratón por encima
Al pasar el cursor, un rectángulo se expande o se contrae dentro del elemento para cambiar su fondo.
Se usa en
Botones
Añade un efecto hover "Rectangle Fill" en [dónde].
El nuevo color de fondo debe cerrarse desde los cuatro bordes a medida que un rectángulo interior se encoge hacia el centro, y volver a abrirse cuando salga el puntero, mientras el color del texto cambia para seguir siendo legible: suave y rápido.
Mantén el texto por encima del relleno y muestra el mismo efecto con el foco del teclado.A
Pasa el ratón por encima
El elemento gira unos pocos grados al pasar el cursor.
Se usa en
Iconos, miniaturas
Añade un efecto hover "Rotate" en [dónde].
El elemento debe girar ligeramente en el sentido de las agujas del reloj mientras el puntero esté encima y volver al salir: suave y sutil.
Evita que el diseño de alrededor se desplace y muestra el mismo efecto con el foco del teclado.