How to Add Animation in Tailwind CSS?
Introduction
Hello, and welcome to this tutorial on adding animations to your projects using Tailwind CSS. In this video, we'll cover how to use existing animations, create custom animations, and apply them to real-world use cases. Let's get started!
Using Existing Animations
Tailwind CSS provides a few built-in animations that you can use right away. These include animate-spin
, animate-ping
, animate-pulse
, and animate-bounce
. To use these animations, simply add the corresponding class to your HTML element. For example:
<div class="w-20 h-20 p-2 bg-blue-500 rounded-md animate-spin"></div>
1<div class="w-20 h-20 p-2 bg-blue-500 rounded-md animate-spin"></div>
This will create a spinning animation for the element.
Creating Custom Animations
To create custom animations, you'll need to define keyframes and add them to your tailwind.config.js
file. Let's create a simple "wiggle" animation as an example:
- Define the keyframes:
// tailwind.config.js module.exports = { theme: { extend: { keyframes: { wiggle: { '0%, 100%': { transform: 'rotate(-3deg)' }, '50%': { transform: 'rotate(3deg)' }, }, }, }, }, variants: {}, plugins: [], };
1// tailwind.config.js
2module.exports = {
3 theme: {
4 extend: {
5 keyframes: {
6 wiggle: {
7 '0%, 100%': { transform: 'rotate(-3deg)' },
8 '50%': { transform: 'rotate(3deg)' },
9 },
10 },
11 },
12 },
13 variants: {},
14 plugins: [],
15};
16
- Add the animation to your theme configuration:
// tailwind.config.js module.exports = { theme: { extend: { animation: { wiggle: 'wiggle 1s ease-in-out infinite', }, }, }, variants: {}, plugins: [], };
1// tailwind.config.js
2module.exports = {
3 theme: {
4 extend: {
5 animation: {
6 wiggle: 'wiggle 1s ease-in-out infinite',
7 },
8 },
9 },
10 variants: {},
11 plugins: [],
12};
13
- Apply the custom animation to your HTML element:
<div class="w-10 h-10 bg-black animate-wiggle"></div>
1<div class="w-10 h-10 bg-black animate-wiggle"></div>
This will create a wiggle animation for the element.
Real-World Use Cases
Now let's look at some practical examples of how to use animations in real-world scenarios.
Example 1: Loading Spinner
Create a loading spinner using the animate-spin
class:
<button type="button" class="bg-indigo-600" disabled> <svg class="motion-safe:animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24"> <!-- ... --> </svg> Processing </button>
1<button type="button" class="bg-indigo-600" disabled>
2 <svg class="motion-safe:animate-spin h-5 w-5 mr-3" viewBox="0 0 24 24">
3 <!-- ... -->
4 </svg>
5 Processing
6</button>
This will create a spinning animation for the SVG element inside the button.
Example 2: Hover Animation
Apply an animation only when the element is hovered:
<div class="w-20 h-20 p-2 bg-purple-500 rounded-md hover:animate-ping"></div>
1<div class="w-20 h-20 p-2 bg-purple-500 rounded-md hover:animate-ping"></div>
This will create a ping animation for the element when it's hovered.
Example 3: Responsive Animation
Apply an animation only at specific breakpoints:
<div class="animate-spin md:animate-none"> <!-- ... --> </div>
1<div class="animate-spin md:animate-none">
2 <!-- ... -->
3</div>
This will apply the animate-spin
animation on small screens and remove it on medium screens and above.
Conclusion
In this tutorial, we've covered how to use existing animations, create custom animations, and apply them to real-world use cases using Tailwind CSS. With these techniques, you can create engaging and interactive user experiences for your projects. Thanks for following, and happy coding!