Hello there, welcome to my blog. Every app user and even the developers themselves love animation, when a user clicks a button or interact with a website and there are sprinkles on animation here and there, it gives them this buffer fly-in-my-tummy feel. Animations have also become an integral part of technology in this present age, from cartoons to Japanese anime and also on our website.
With CSS and Javascript, any developer can make cool animations that excite users, but we know the stress that comes with writing animations from setting the timing function to the duration and even trying to make sure the movement of the animation is beautiful. Let take for example, a developer who wants to animate a call-to-action button to bounce infinitely to grab user's attention, you should know the number of lines of CSS you would have to write to achieve that but TailwindCSS provides us some first-hand animation classes that we can just add to our CSS class to get a simple animation working, like spinning, bouncing e.t.c. If you are using TailwindCSS, you really don't have to write any CSS animations with @keyframes for this trivial animation. In this article, we are going to learn how to use the Tailwind transition and animation class without using @keyframes. Grab your popcorn.
In this article I will explain :
- How to use TailwindCSS animation class.
- How to use TailwindCSS transition class.
- Learn how to write customized animation in TailwindCSS.
Prerequisite
- Basic knowledge of CSS transition.
- Basic knowledge of CSS animation
Transition
Transition is the process or a period of changing from one state or condition to another. Transitions are usually triggered by an action of a user on an element, either by hovering, clicking e.t.c. In this section, you are going to learn how to write transitions for different states using the TailwindCSS transition utility classes.
Transition in CSS as we know is done by setting how an HTML element will move from one state to another. For a button, the state can be when a mouse over it, it should change the background color or become larger. We would learn how to write that now.
<div class= "text-center p-10">
<button class="px-8 py-2 mx-auto text-white bg-blue-700 rounded transition duration-500 ease-in-out hover:bg-green-400 ">
Hello
</button>
</div>
Output:
I just made a div to act as a container and gave it padding of 10 on all sides, and then centered anything inside it. For the button which is our focus; padding on the x-axis(left and right) of 8 which is equal to 2rem and padding on the y-axis(top and bottom) of 4 which is equal to 1rem and I centered it by giving it an auto-margin on the x-axis(left and right), a white text and a background of blue with a density of 700 and made it rounded(border-radius). Now to the transistion part, I wrote the transition class which would activate transition on the button just like how we would do it in normal CSS, and I gave it a duration of 500miliseconds and a timing-function of ease-in-out, and lastly, I added the state it should transit to which will be triggered by a mouse hover. You can see from the result that it worked. You can use the Tailwind playground to play around with this. Now let go further and add some transform property. Now I want the button to move up a bit when the user hovers over it while also changing the background color.
<div class= "text-center p-10">
<button class="px-8 py-2 mx-auto text-white bg-blue-700 rounded transition duration-500 ease-in-out hover:bg-green-400 transform hover:-translate-y-1">Hello</button>
</div>
Output:
Now we can see that the button now moves up a little bit when we hover on the button, so what did I do, I added a transform class which will tell HTML that we want to add some transform property to the element( button), then I added a transform property which is translate so it moves up in the y-axis -translate-y-1 which is equal to -0.25rem. That's it, we just added a transition to our button.
Animation
Animations are making elements move from one position to another over a period of time. Animations can be triggered by an event mostly by scroll but most of the time they are moved by default as the website loads. In this section, we are going to learn how we can use the TailwindCSS default animation utility class as well as create our own animations.
TailwindCSS provides us with :
- animate-spin.
- animate-bounce.
- animate-ping.
- animate-pulse.
We can use the above to make animations and as their names imply; spin, bounce, ping, and pulse. We are going to see how I will use the bounce animation on our button from the previous example.
<div class= "text-center p-10">
<button class="px-8 py-2 mx-auto text-white bg-blue-700 rounded transition duration-500 ease-in-out hover:bg-green-400 transform hover:-translate-y-1 animate-bounce">
Hello
</button>
</div>
Output:
See that TailwindCSS just saved us from having to write a @keyframe to make that small animation. But you can also write your own animation since TailwindCSS doesn't provide all the kinds of heavy animations we may need to use, and we can also customize the default animation too. Let see how we can make that. We would make a spinning circle using TailwindCSS animation class animate-spin then we are going to slow it down by customizing it. This would be fun.
<div class= "text-center p-10">
<div class="px-8 py-2 mx-auto w-32 h-32 text-white bg-blue-700 rounded-full animate-spin">Hello</div>
</div>
Output:
From the above, I made a circle by making a div rounded by giving it a height of h-32 and width of w-32 which is equal to 8rem of width and height, then rounded-full (border-radius:50%) which made it circular, then padding on the x-axis(left and right) of 8 which is equal to 2rem, the padding on the y-axis (top and bottom) of 2 which Is equal to 1rem and text of white. The text hello, I put it there to help us know that the circle is actually spinning. So now we are going to slow it down a little bit.
Open your tailwind.config.js file and add the following which I will explain below.
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
},
extend: {
animation:{
'spin': 'spin 3s linear infinite'},
},
variants: {
extend: {},
},
plugins: [],
}
Output:
From the output, you can see we have slowed it down from the normal speed. So what did I do there, I went to the extend object since I don't want to over-ride all the default animations, read more about customization in TailwindCSS here and here. Then I targeted animations since that is what I want to customize. Then I added the name I want to call the animation, note you can call it whatever you want, just make sure it matches the class name, for example instead of writing spin I can write spin-slow but will have to change the class name on the HTML element to animate-spin-slow for it to work. Understand? Good, let continue.
The other side is simply the name of the animation whether custom or default, and I used the default animation-name, I just have to call it and specify the duration, timing-function e.t.c as we see above. And that's it. I just slowed it down. Easy peasy. You can go ahead and playground with it to get familiar with it, and it also feels like normal CSS so it is simple to grasp.
Making custom animations.
To add new animation @keyframes, use the keyframes section of your theme configuration in the extend object, since we don't want to overwrite the default animations but rather make ours extend/ be a part of it: Open your tailwind.config.js file and let make an animation.
module.exports = {
theme: {
extend: {
keyframes: {
wiggle: {
'0% :{ transform: 'rotate(-5deg)' },
'50%': { transform: 'rotate(5deg)' },
100%': { transform: 'rotate(-5deg)' },
},
},
animation:{
'spin': 'spin 3s linear infinite',
'wiggle': 'wiggle 2s linear infinite'},
},
},
variants: {},
plugins: [],
}
Now remember to run npm run build to build it to our CSS
If you don't know anything about the
buildplease read the installation guide in this article
And we can change our class to our own animation we made:
<div class= "text-center p-10">
<div class="px-8 py-2 mx-auto w-32 h-32 text-white bg-blue-700 rounded-full animate-wiggle">Hello</div>
</div>
Output:
And Yaaay!! our circle is wiggling, more like telling us 'No'. Lol. Anyways, that looks like normal CSS @keyframes just that we are doing it in a Javascript way. We started the Keyframes by declaring a keyframe object which would hold as many animation settings as we want, then I created an animation named wiggle and we set how the animation should behave in a different time in its movement. Easy peasy. And we went down to the animations object and added our own custom animation and I set the duration, timing-function e.t.c. Simple and short.
In the end..
You have just learned how to use TailwindCSS default animation utility class and also how to customize it and then you have learned how to include your own custom animation. One of the reasons, I love TailwindCSS is because it gives us developer the freedom to do what we want with it. TailwindCSS is a hundred percent customizable giving developers control over their own CSS, which is amazing. So you have come to the end of this amazing article. Hope you learned something useful?. If you did, like, share, comment, just do anything to make it go viral.
I would be posting more articles, so be sure to follow me to get notified when I post them.
If you have any questions concerning Go, Javascript, TailwindCSS, Open-source, or this article? You can reach me on Twitter. Till next time, see ya. Thank you.