Domine las técnicas de animación con Tailwind CSS para brindar a los usuarios una experiencia inolvidable
apertura
La animación se ha convertido en una parte esencial del diseño web, lo que permite a los desarrolladores crear experiencias de usuario atractivas e interactivas.
Tailwind CSS, un marco CSS popular y práctico, proporciona un potente conjunto de herramientas para crear fácilmente impresionantes efectos de animación.
En esta publicación, exploraremos el apasionante mundo de la animación avanzada con Tailwind CSS y revelaremos algunos trucos sorprendentes que llevarán sus proyectos al siguiente nivel.
Transición 与 Transformación
Tailwind CSS proporciona un conjunto de clases de utilidad para utilizar transiciones y transformaciones de CSS. Estas propiedades le permiten crear fácilmente animaciones fluidas y transiciones sorprendentes sin demasiado esfuerzo.
Además de transiciones y transformaciones, Tailwind CSS también admite animaciones de fotogramas clave. Los fotogramas clave le permiten definir animaciones personalizadas especificando una serie de cambios de estilo en diferentes momentos.
Profundicemos en los diferentes tipos de animación.
Texto dinámico degradado
Para animar texto degradado, incluiremos la clase animate-pulse. Esta clase aplica una animación pulsante al elemento, dándole un efecto sutil pero llamativo.
<div class="ms-52 my-10 text-5xl font-extrabold">
<span class="animate-pulse bg-gradient-to-r from-pink-500 via-green-500 to-violet-500 bg-clip-text text-transparent"> Tailwind CSS Animation </span>
</div>
En este ejemplo, tenemos un elemento <span> que contiene el texto "texto degradado". Para crear el efecto de degradado, utilizamos la clase text-transparent para hacer que el texto sea transparente. Finalmente, usamos la clase bg-gradient-to-r para especificar un degradado horizontal de púrpura a azul.
Propósito: Podemos usar esta animación para resaltar o enfocar detalles.
Pantalla esqueleto (área de ocupación)
En este ejemplo usaremos Tailwind CSS para crear un área de contenido de marcador de posición para usar cuando no hay conexión de red o se están cargando datos :)
<div class="mx-auto mt-10 w-full max-w-sm rounded-md border border-gray-300 p-4">
<div class="animate-pulse space-x-4">
<div class="grid">
<div class="flex">
<div class="w-10 rounded-full bg-slate-200"></div>
<div class="ms-4 w-full space-y-6">
<div class="h-2 rounded bg-slate-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-slate-200"></div>
<div class="col-span-1 h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
</div>
</div>
<div class="mt-5 space-y-6 py-1">
<div class="h-2 rounded bg-slate-200"></div>
<div class="space-y-3">
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2 h-2 rounded bg-slate-200"></div>
<div class="col-span-1 h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
<div class="h-2 rounded bg-slate-200"></div>
</div>
</div>
</div>
</div>
En este ejemplo, utilizamos clases anidadas <div> y flex para centrar el texto de carga horizontal y verticalmente. Las clases justify-center y items-center garantizan que el contenido esté centrado dentro del contenedor principal.
Al aplicar la clase animate-pulse, toda la huella mostrará una animación pulsante, dando al usuario la ilusión de movimiento e indicando que el contenido se está cargando.
Propósito: Podemos utilizar esta animación para mostrar que los datos solicitados se están cargando.
3. Bola que gira infinitamente
Este código de animación crea un elemento circular con un borde y rotación. Dentro del elemento circular, hay un elemento circular más pequeño ubicado en la esquina superior derecha.
<div class="my-40 flex">
<div class="relative mx-auto h-28 w-28 animate-spin rounded-full border-2 p-4">
<span class="absolute right-5 top-2 flex h-3 w-3">
<span class="bg-white-500 relative inline-flex h-3 w-3 rounded-full bg-gray-500"> </span>
</span>
</div>
</div>
En el fragmento de código anterior hay un elemento div con clase my-40 y flex. Dentro de este div, podemos usar la clase animate-spin para crear un elemento circular con animación de giro infinito. Podemos usarlo para mostrar el procesamiento de carga de datos o la carga de imágenes o archivos.
Propósito: Usando esta animación, podemos mostrar el proceso de carga de datos, carga de imágenes o carga de archivos.
4. Forma redonda elástica doble
Este código de animación crea una animación con dos círculos. Uno de ellos es un círculo más grande que rebota y el otro es un círculo más pequeño que gira debajo de él. Los efectos de animación crean la ilusión de carga o actividad.
<div class="my-40 flex">
<div class="relative mx-auto h-10 w-10 animate-bounce">
<div class="mx-auto h-16 w-16 animate-pulse rounded-full bg-gray-400"></div>
<span class="absolute flex h-5 w-5 animate-spin">
<span class="h-4 w-4 rounded-full bg-gray-400"> </span>
</span>
</div>
</div>
En esta animación, tenemos una clase div con efectos de animación de posicionamiento relativo, centrado, cambio de tamaño y rebote. Dentro del segundo div, hay otro elemento div con efecto de animación pulsante, de cambio de tamaño y de centrado y color de fondo gris.
Aplicamos la clase animate-bounce en el elemento div principal, por lo que todos los elementos internos tienen el efecto de rebote predeterminado. También aplicamos el efecto de pulso animado en un círculo más grande para lograr el efecto de pulso.
Propósito: Podemos usar esta animación para mostrar la actividad del usuario o los efectos de carga de datos.
5. Cuadrados punteados giratorios
Este código de animación consta de una forma de rectángulo redondeado que gira para representar algún tipo de actividad o carga. La caja rectangular tiene un contorno gris discontinuo para mayor impacto visual.
<div class="my-40 flex">
<div class="mx-auto h-20 w-20 animate-spin rounded-3xl p-6 outline-dotted outline-2 outline-gray-500"></div>
</div>
El fragmento de código anterior tiene una clase que aplica el efecto de animación de giro al giro animado interno. La clase rounded-3xl redondea las esquinas del div interior, creando una forma más redondeada. Las clases contorno-puntos, contorno-2 y contorno-gris-500 aplican un contorno gris punteado con un ancho de 2 unidades al div interior.
Usos: Podemos usar esta animación en múltiples lugares, como resaltar cuadros, cargar datos, manipular archivos o imágenes, etc.
6. círculo elástico
Este código de animación creará una animación de carga con dos elementos que rebotan. El elemento más externo rebotará y dentro de él habrá un elemento anidado que también rebotará.
Además, hay un pequeño elemento de punto que se mueve y rebota con los demás elementos.
<div class="my-40 flex">
<div class="relative mx-auto h-10 w-10">
<div class="relative mx-auto ms-5 h-24 w-24 animate-bounce rounded-full border-2">
<div class="absolute bottom-0 right-10">
<div class="relative h-40 animate-bounce">
<div class="absolute bottom-0 right-0 h-2 w-2 rounded-full bg-black"></div>
</div>
</div>
</div>
</div>
</div>
El div más externo con clase animate-bounce creará un efecto de animación de rebote.
Dentro de ese div, hay un div anidado con clase animate-bounce que también produce un efecto de rebote. Dentro del segundo div anidado, hay un color de fondo negro (bg-black) y un tamaño pequeño h-2 y w-2. Esto crea un pequeño punto negro o indicador que también participa en la animación del rebote.
Finalidad: Podemos utilizar esta animación para mostrar el procesamiento y carga de archivos o imágenes.
7. Flechas en movimiento
Este código de animación creará un efecto de animación en movimiento en el elemento SVG. El SVG representa una flecha verde y la animación la moverá hacia adelante y hacia atrás horizontalmente cambiando la posición X de la flecha.
<div class="my-40 flex">
<div class="relative mx-auto mt-5 animate-[propel_5s_infinite]">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="green" class="h-16 w-16">
<path d="M3.478 2.405a.75.75 0 00-.926.94l2.432 7.905H13.5a.75.75 0 010 1.5H4.984l-2.432 7.905a.75.75 0 00.926.94 60.519 60.519 0 0018.445-8.986.75.75 0 000-1.218A60.517 60.517 0 003.478 2.405z" />
</svg>
</div>
</div>Ahora, agregue fotogramas clave en su archivo tailwind.config.js para animar sus objetos. Modifícalo según tus necesidades.
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
propel: {
'0%': { transform: 'translateX(0)' },
'20%': { transform: 'translateX(25%)' },
'40%': { transform: 'translateX(-25%)' },
'60%': { transform: 'translateX(25%)' },
'100%': { transform: 'translateX(-25%)' },
},
},
},
},
plugins: [],
}
El div más externo tiene clases my-40 y flex, que proporcionan espaciado vertical y permiten el diseño de flexbox. Dentro del segundo div hay un elemento svg con espacio de nombres XML, cuadro de visualización y atributos de clase. Las clases h-16 y w-16 establecen la altura y el ancho del SVG, y el atributo fill="green" establece el color de relleno del SVG en verde.
Propósito: Podemos utilizar esta animación para guiar, enfocar y resaltar áreas.
8. Cubos giratorios
Este código de animación creará un contenedor y le aplicará una animación de rotación para que se desplace o gire continuamente hacia adelante y hacia atrás.
Dentro del contenedor hay un elemento más pequeño al que también se le aplica una animación de giro, lo que lo hace girar continuamente verticalmente hacia adelante y hacia atrás.
<div class="my-40 flex">
<div class="relative mx-auto h-28 w-28 animate-[displace_5s_infinite] border border-red-200">
<div class="h-14 animate-[flip_5s_infinite] bg-red-100"></div>
</div>
</div>Ahora, agregue fotogramas clave para animar objetos en su archivo tailwind.config.js.
module.exports = {
content: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
theme: {
extend: {
keyframes: {
displace: {
'0%': { transform: 'rotate(0deg)' },
'20%': { transform: 'rotate(-90deg)' },
'40%': { transform: 'rotate(0deg)' },
'60%': { transform: 'rotate(0deg)' },
'80%': { transform: 'rotate(90deg)' },
'100%': { transform: 'rotate(0deg)' },
},
},
},
},
plugins: [],
}
La clase animate-[displace_5s_infinite] aplica el efecto de animación "desplazar" al elemento, lo que hace que gire continuamente hacia adelante y hacia atrás.
En el div interno, las clases h-14, animate-[flip_5s_infinite] y bg-red-100 representan que el contenido dentro del contenedor tiene una altura de 14 unidades, un color de fondo rojo y tiene aplicada una animación de "voltear". para hacerlo vertical Rotación continua hacia adelante y hacia atrás.
Uso: Podemos usar esta animación para cargar datos, procesar o cargar archivos o imágenes.
Utilice animaciones con otras funciones de Tailwind (modo oscuro)
Las capacidades de animación de Tailwind CSS se pueden integrar perfectamente con otras funciones proporcionadas por el marco. Por ejemplo, puede combinar animación con clases de diseño responsivo para crear experiencias de usuario adaptables y atractivas en una variedad de dispositivos.
También puede aprovechar la función de modo oscuro de Tailwind CSS para aplicar diferentes efectos de animación según la combinación de colores preferida del usuario. Al utilizar clases dinámicas y variantes de utilidades, puede crear animaciones complejas e interactivas para mejorar sus diseños web.
Finalizar
Una animación del diseño anterior demuestra la variedad y creatividad que se puede lograr usando CSS y el marco CSS Tailwind. Estos ejemplos demuestran varios efectos de animación, como girar, rebotar, pulsar, voltear y menear.
Al aprovechar el poder de los fotogramas clave CSS y las clases de utilidad CSS de Tailwind, estas animaciones aportan un elemento dinámico y atractivo a un blog o sitio web. Ya sea un ícono giratorio, una forma que rebota o un texto que se mueve, estas animaciones pueden captar la atención de los usuarios y mejorar la experiencia visual.
Además, la capacidad de personalizar y definir fotogramas clave en el archivo de configuración CSS de Tailwind permite ajustar y ampliar las capacidades de animación. Esta flexibilidad brinda a los desarrolladores la capacidad de crear efectos únicos y atractivos para satisfacer sus necesidades de diseño específicas.
En general, incorporar efectos de animación en su blog puede ayudar a crear una experiencia de usuario agradable y memorable que deje una impresión duradera en sus visitantes. Sin embargo, es importante utilizar los efectos de animación con moderación y considerar su impacto en el rendimiento y la accesibilidad para garantizar una experiencia de navegación fluida e inclusiva para todos los usuarios.
Debido al espacio limitado del artículo, el contenido de hoy se compartirá aquí. Al final del artículo, me gustaría recordarles que la creación de artículos no es fácil. Si le gusta que comparta, no olvide Me gusta y reenvíalo para que más personas necesitadas lo vean. Al mismo tiempo, si desea obtener más conocimientos sobre tecnología front-end, bienvenido a seguirme, su apoyo será la mayor motivación para compartir. Continuaré publicando más contenido, así que estad atentos.
Beneficios para los fanáticos
Comparta el código fuente de 9 plantillas de tarjetas TailwindCSS de uso común. Si le gusta, descárguelo y recójalo.