Master Animation Techniques with Tailwind CSS to Give Users an Unforgettable Experience
opening
Animation has become an essential part of web design, enabling developers to create engaging and interactive user experiences.
Tailwind CSS, a popular and practical CSS framework, provides a powerful set of tools to easily create stunning animation effects.
In this post, we'll explore the exciting world of advanced animation with Tailwind CSS and reveal some amazing tricks that will take your projects to the next level.
Transition 与 Transform
Tailwind CSS provides a set of utility classes for utilizing CSS transitions and transforms. These properties enable you to easily create smooth animations and stunning transitions without too much effort.
In addition to transitions and transforms, Tailwind CSS also supports keyframe animations. Keyframes allow you to define custom animations by specifying a series of style changes at different points in time.
Let's dig into the different types of animation.
Gradient dynamic text
To animate gradient text, we'll include the animate-pulse class. This class applies a pulsating animation to the element, giving it a subtle but eye-catching effect.
<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>
In this example, we have a <span> element containing the text "gradient text". To create the gradient effect, we use the text-transparent class to make the text transparent. Finally, we use the bg-gradient-to-r class to specify a horizontal gradient from purple to blue.
Purpose: We can use this animation to highlight or focus details.
Skeleton screen (occupancy area)
In this example we'll use Tailwind CSS to create a placeholder content area for use when there is no network connection or data is loading :)
<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>
In this example, we use nested <div> and flex classes to center the loading text horizontally and vertically. The justify-center and items-center classes ensure content is centered within the parent container.
By applying the animate-pulse class, the entire footprint will display a pulsating animation, giving the user the illusion of movement and signaling that content is loading.
Purpose: We can use this animation to show that the requested data is loading.
3. Infinitely spinning ball
This animation code creates a circular element with a border and rotation. Inside the circular element, there is a smaller circular element positioned in the upper right corner.
<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>
In the code snippet above there is a div element with class my-40 and flex. Inside this div, we can use the animate-spin class to create a circular element with infinite spin animation. We can use it to show the processing of data loading or the uploading of images or files.
Purpose: Using this animation, we can show the process of data loading, image loading or file uploading.
4. Double elastic round shape
This animation code creates an animation with two circles. One of them is a larger circle that bounces, and the other is a smaller circle that spins beneath it. Animation effects create the illusion of loading or activity.
<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>
In this animation, we have a div class with relative positioning, centering, resizing and bouncing animation effects. Inside the second div, there is another div element with centering, resizing, pulsing animation effect and gray background color.
We applied the animate-bounce class on the parent div element, so all inner elements have the default bouncy effect. We also applied the animat-pulse effect on a larger circle to achieve the pulse effect.
Purpose: We can use this animation to show user activity or data loading effects.
5. Rotating dotted squares
This animation code consists of a rotating rounded rectangle shape to represent some kind of activity or loading. The rectangular box has a dashed gray outline for added visual impact.
<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>
The code snippet above has a class that applies the spin animation effect to the inner animate-spin. The rounded-3xl class rounds the corners of the inner div, creating a more rounded shape. The outline-dotted , outline-2 and outline-gray-500 classes apply a dotted gray outline with a width of 2 units to the inner div .
Uses: We can use this animation in multiple places, like highlighting frames, loading data, file or image manipulation, etc.
6. Elastic circle
This animation code will create a loading animation with two bouncing elements. The outermost element will bounce, and within it, there will be a nested element that will also bounce.
Additionally, there is a small dot element that moves and bounces with the other elements.
<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>
The outermost div with class animate-bounce will create a bouncing animation effect.
Inside that div , there is a nested div with class animate-bounce that also produces a bounce effect. Inside the second nested div, there is a black background color ( bg-black ) and a small size h-2 and w-2 . This creates a small black dot or indicator which also participates in the bouncing animation.
Purpose: We can use this animation to show the processing and loading of files or images.
7. Moving Arrows
This animation code will create a moving animation effect on the SVG element. The SVG represents a green arrow, and the animation will move it back and forth horizontally by changing the X position of the arrow.
<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>Now, add keyframes in your tailwind.config.js file to animate your objects. Modify it according to your needs.
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: [],
}
The outermost div has my-40 and flex classes, providing vertical spacing and enabling flexbox layout. Inside the second div there is an svg element with XML namespace, viewportbox and class attributes. The h-16 and w-16 classes set the height and width of the SVG, and the fill="green" attribute sets the fill color of the SVG to green.
Purpose: We can use this animation to guide, focus and highlight areas.
8. Rotating cubes
This animation code will create a container and apply a rotation animation to it so that it is continuously displaced or rotated back and forth.
Inside the container is a smaller element that also has a flip animation applied, making it continuously rotate vertically back and forth.
<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>Now, add keyframes to animate objects in your tailwind.config.js file.
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: [],
}
The animate-[displace_5s_infinite] class applies the "displace" animation effect to the element, causing it to continuously rotate back and forth.
In the inner div, the classes h-14 , animate-[flip_5s_infinite] , and bg-red-100 represent that the content inside the container has a height of 14 units, a red background color, and has a "flip" animation applied to make it vertical Continuous rotation back and forth.
Usage: We can use this animation for loading data, file or image processing or uploading.
Use animations with other Tailwind features (dark mode)
The animation capabilities of Tailwind CSS can be seamlessly integrated with other features provided by the framework. For example, you can combine animation with responsive design classes to create adaptable and engaging user experiences across a variety of devices.
You can also take advantage of the dark mode feature of Tailwind CSS to apply different animation effects based on the user's preferred color scheme. By using dynamic classes and utility variants, you can create complex and interactive animations to enhance your web designs.
Finish
An animation of the above design demonstrates the variety and creativity that can be achieved using CSS and the Tailwind CSS framework. These examples demonstrate various animation effects such as spinning, bouncing, pulsating, flipping, and wiggling.
By harnessing the power of CSS keyframes and Tailwind CSS utility classes, these animations bring a dynamic and engaging element to a blog or website. Whether it’s a spinning icon, bouncing shape, or wiggling text, these animations can grab users’ attention and enhance the visual experience.
Additionally, the ability to customize and define keyframes in the Tailwind CSS configuration file enables fine-tuning and extension of animation capabilities. This flexibility gives developers the ability to create unique and compelling effects to meet their specific design needs.
Overall, incorporating animation effects into your blog can help create a memorable and enjoyable user experience that leaves a lasting impression on your visitors. However, it is important to use animation effects sparingly and consider their impact on performance and accessibility to ensure a seamless and inclusive browsing experience for all users.
Due to the limited space of the article, today’s content will be shared here. At the end of the article, I would like to remind you that the creation of articles is not easy. If you like my sharing, please don’t forget to like and forward it, so that more people in need See. At the same time, if you want to gain more knowledge of front-end technology, welcome to follow me, your support will be the biggest motivation for me to share. I will continue to output more content, so stay tuned.
Fan benefits
Share the source code of 9 commonly used TailwindCSS card templates, if you like it, download it and collect it