tailwindcss motion

✨ 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 >

• Ajustar la duración del motion-preset-slide-right :

 < div class =" motion-preset-slide-right motion-duration-2000 " > </ div >

• Aumentar la altura del motion-preset-bounce :

 < div class =" motion-preset-bounce -motion-translate-y-in-150 " > </ div > 

Animaciones básicas

Además de los ajustes preestablecidos, puedes crear tus propias animaciones personalizadas combinando estas clases base:

• Fundido de aparición : motion-opacity-in-0
• Deslice hacia adentro :
  • Desde abajo: motion-translate-y-in-100
  • Desde arriba: -motion-translate-y-in-100
• Escalar en : motion-scale-in-75
• Girar hacia adentro :
  • Desde 180 grados: motion-rotate-in-180
  • Desde -90 grados: -motion-rotate-in-90
• Desenfocar en : motion-blur-in-sm
• Escala de grises en : motion-grayscale-in
• Cambio de color de fondo : motion-bg-in-red-500
• Cambio de color del texto : motion-text-in-blue-500

Combinando animaciones

Puedes combinar múltiples animaciones en un solo elemento:

 < div
  class =" motion-scale-in-75 motion-translate-y-in-100 motion-rotate-in-90 "
> </ div >

Salir de animaciones

Para animaciones de salida, simplemente reemplace in con out en el nombre de la clase.

Modificadores

Puede personalizar la duración, el retraso y la función de sincronización de cualquier animación.

• Duración : motion-duration-500
• Retraso : motion-delay-500
• Función de sincronización : motion-timing-spring-bouncy

Por ejemplo:

 < div
  class =" motion-duration-2000 motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Esto aplica una duración de 2000 ms tanto a las animaciones de rotación como a las de opacidad.

Modificadores para cada propiedad.

Puede aplicar modificadores a propiedades específicas usando una barra diagonal / .

Por ejemplo:

 < div
  class =" motion-delay-500/rotate motion-rotate-in-180 motion-opacity-in-0 "
> </ div >

Aquí, el retraso de 500 ms se aplica sólo a la rotación, no a la opacidad.

Funciones de facilidad

El complemento incluye funciones de sincronización personalizadas:

algunos ejemplos son:

• motion-ease-spring-smooth
• motion-ease-spring-snappy
• motion-ease-spring-bouncy
• motion-ease-spring-bounciest
• motion-ease-bounce
• motion-ease-bounce
• motion-ease-in-quart

Ejemplos

Página de inicio: https://play.tailwindcss.com/uAuVF8F1vC

Diálogo de chat: https://play.tailwindcss.com/gjGqEKswjQ

Isla dinámica de batería baja: https://play.tailwindcss.com/tvYFbHtNNQ

Muestras de colores de Apple: https://play.tailwindcss.com/cvQ3Nk3v8j

¿Qué es Rombo?

Rombo es una empresa en etapa inicial que crea herramientas para ayudar a las empresas a crear hermosas interfaces interactivas. Estamos comenzando con un conjunto de herramientas para que ingenieros, diseñadores y especialistas en marketing creativos animen de forma nativa dentro de flujos de trabajo comunes, como Tailwind, Figma, Webflow, Shopify y más por venir. Regístrese para recibir actualizaciones en nuestro sitio en https://rombo.co