movimiento sin viento de cola

✨ movimiento de viento de cola β ✨

tailwindcss-motion es un complemento CSS de Tailwind creado en RomboHQ. Es una biblioteca de animación simple pero poderosa con una sintaxis simple.

Movimiento, sin conmoción.

⚒️ Instalación

1. Instale el paquete npm

npm i -D tailwindcss-motion

2. Agregue a su tailwind.config.js

 // tailwind.config.js

export default {
     content : [ ... ] ,
     theme : {
        extend : { ... } ,
     } ,
     plugins : [ require ( 'tailwindcss-motion' ) ] ,
} ;

o, para usar ESM:

 import tailwindcssMotion from "tailwindcss-motion" ;

/** @type {import('tailwindcss').Config} */
export default {
     content : [ ... ] ,
     theme : {
          extend : { } ,
     } ,
     plugins : [ tailwindcssMotion ] ,
} ; 

¿Cómo funciona?

Proporcionamos una sintaxis simple para animar cualquier elemento en su proyecto Tailwind. En lugar de definir fotogramas clave personalizados, proporcionamos clases de utilidad para animar cada dimensión, en línea.

Por ejemplo, para un efecto de diapositiva y desvanecimiento, simplemente necesita motion-translate-x-in-25 motion-opacity-in-0 o puede usar uno de nuestros ajustes preestablecidos con motion-preset-fade

Preajustes de movimiento

Proporcionamos una colección de ajustes preestablecidos para animar sus componentes fácilmente:

• Desvanecimiento : motion-preset-fade
• Deslizar :
  • Derecha: motion-preset-slide-right
  • Izquierda: motion-preset-slide-left
  • Arriba: motion-preset-slide-up
  • Abajo: motion-preset-slide-down
• Enfoque : motion-preset-focus
• Desenfoque :
  • Derecha: motion-preset-blur-right
  • Izquierda: motion-preset-blur-left
  • Arriba: motion-preset-blur-up
  • Abajo: motion-preset-blur-down
• Rebote : motion-preset-bounce
• Expandir : motion-preset-expand
• Reducir : motion-preset-shrink
• Pop : motion-preset-pop
• Comprimir : motion-preset-compress
• Agitar : motion-preset-shake
• Wiggle : motion-preset-wiggle
• Confeti : motion-preset-confetti
• Máquina de escribir : motion-preset-typewriter-[number of characters]
• Flomoji : motion-preset-flomoji

Personalización de ajustes preestablecidos

Puede personalizar aún más los ajustes preestablecidos utilizando animaciones base y clases de modificadores.

Por ejemplo:

• Agregue un retraso al motion-preset-fade :

">

 < div class =" motion-preset-fade motion-delay-500 " >  div >