This document provides a comprehensive guide on using animations in Tailwind CSS, highlighting their importance for user engagement and experience. It covers various aspects such as installation, different types of animations, customization, and tips for effective use, including performance considerations. The article also explores combining animations and creating custom animations using @keyframes, along with practical code examples and best practices.

1. Tailwind Animation: How to Make Eye-Catching Websites
Emmanuel Uchenna
Animations, once seen as supplementary for web development, are now a powerful tool for
capturing audience attention.
Tailwind CSS, with its seamless integration of animations, is revolutionizing how developers
approach front-end design.
CSS TAILWIND 13 Oct 2023 11 min read

2. This article explores the animation capabilities of Tailwind CSS and how to seamlessly
incorporate them into responsive, scalable web applications. We will cover techniques for
crafting everything from subtle micro-interactions to complex, eye-catching transitions that bring
life to your web applications using Tailwind.
Ready to learn more?
In this article, we will cover everything you need to know about Tailwind CSS animations,
including:
The different types of animations available
How to apply animations to your elements
How to customize animations
How to create your custom animations
We will also provide examples and code snippets to help you get started quickly.
Let’s dive in 🚀
Importance of Animations
Today, animation is more than just eye candy; it is a critical tool for increasing user engagement
and overall user experience. Here’s why animation is important:
Engaging User Engagement: Animation piques the user’s interest and encourages
exploration.
Better User Experience: It serves as a visual storyteller, making navigation easier.
Visual Feedback and Delight: Animated cues boost user confidence while also adding a
dash of delight.
Increased Brand Identity: Custom animations increase brand recognition and memorability.
Perceived Page Performance: Smooth transitions and professionalism are created by well-
executed animations.
Why Tailwind CSS Animations?

3. There are many advantages to using Tailwind animations. Here are just a few:
Ease of use: Tailwind animations are incredibly easy to use. With just a few utility classes,
you can add animations to your elements without writing any custom CSS.
Flexibility: Tailwind CSS offers a wide range of animation options, so you can create any
type of animation you need, from simple to complex.
Performance: Tailwind animations are highly performant, so you can use them without
worrying about slowing down your website.
Responsiveness: Tailwind animations are responsive by default, so they will look great on all
devices and screen sizes.
If you are looking to speed up development and skip the tedious part of writing code, check out
our collections of 10, 000+ AI-generated custom components for TailwindCSS for you to choose
from.
Prerequisites
To get started with Tailwind animations, you will need to have the following prerequisites:
Basic knowledge of HTML and CSS: You should be able to create basic HTML elements
and style them with CSS. You should also have a basic understanding of CSS animations,
such as how to create and apply them to elements.
Tailwind CSS installed in your project: You can install Tailwind CSS using NPM or Yarn.
Once installed, you will need to configure it for your project. You can find more information on
the Tailwind CSS website.
Installation
To install the latest version of Tailwind CSS, you can use NPM or Yarn.
With NPM:
npm install tailwindcss
With Yarn:
yarn add tailwindcss
CSS Animation properties
There are basically two main CSS properties that are responsible for animations.
1. keyframes:

4. Keyframes allow you to define the animation’s start and end states, as well as the intermediate
states in between.
2. animation:
This allows you to set all the css animation properties like so:
animation-name: Specifies the name of the @keyframes animation
animation-duration: Specifies how long time an animation should take to complete one cycle
animation-timing-function: Specifies the speed curve of the animation
animation-delay: Specifies a delay for the start of an animation
animation-iteration-count: Specifies the number of times an animation should be played
animation-direction: Specifies animation direction-forward/backward or alternate cycles
animation: This property is mostly used with shorthand tricks, without mentioning the above
properties separately.
Customize built-in animations
You can also create custom animations by modifying the tailwind.config.js file.
/** @type {import('tailwindcss').Config} */module.exports = {
content: [],
theme: {
extend: {
keyframes: {},
animation: {},
},
},
plugins: [],
}
In theme/extend block we can add keyframes and animation properties of custom animations.
Tailwind CSS includes four pre-defined animations by default, and these animations are
customizable through the tailwind.config.js file.
Basic Tailwind Animation Classes
Tailwind CSS provides utility classes for adding basic animations to your elements. These
classes are easy to use and can be used to create a variety of different effects.
Here are the basic animation classes:

5. To use a basic tailwind CSS animation class, simply add it to the element that you want
to animate.
<button class="animate-bounce">Bounce Me</button>
This will add a bouncing animation to the button when it is clicked.
You can also use Tailwind CSS to customize the basic animation classes.
For example, you can change the duration, easing, and direction of the animation.
To customize a basic animation class, simply add the desired CSS properties to the
element.
<button class="animate-bounce duration-1000 ease-in-out">Bounce Me</button>
This will change the duration of the bouncing animation to 1000 milliseconds and the easing
function to ease-in-out.
Here are some examples of how to use the basic animation classes:
Add a spinning animation to a loading spinner:

6. <div class="animate-spin border-2 rounded-md border-red-500 h-5 w-5"></div>
Add a pinging animation to a notification badge:
<span class="animate-ping absolute rounded-full bg-sky-400 opacity-75"> o </span>
Add a pulsing animation to a skeleton loader:
<div class="animate-pulse flex space-x-4 border-2 border-grey p-5 rounded-md">
<div class="rounded-full bg-slate-200 h-10 w-10"></div>
<div class="flex-1 space-y-6 py-1">
<div class="h-2 bg-slate-200 rounded"></div>
<div class="h-2 bg-slate-200 rounded"></div>
<div class="h-2 bg-slate-200 rounded"></div>
</div>
</div>
Add a bouncing animation to a button:
<button class="animate-bounce">Bounce Me</button>

7. These are just a few examples of how to use the basic Tailwind classes. You can use these
classes to create a variety of different effects, so be creative and experiment! 👐
Transition Classes
Tailwind CSS provides transition classes for controlling the animation timing of your elements.
These classes can be used to create smooth and engaging transitions between different states.
Here is a table of the basic Tailwind transition classes:
To use a transition class, simply add it to the element that you want to transition.
<button class="transition duration-500 ease-in-out">Transition Me</button>
This will enable a 500-millisecond transition with an ease-in-out easing function on the button.
You can also use Tailwind CSS to customize the transition classes. For example, you can
change the duration, easing, and delay of the transition.
To customize a transition class, simply add the desired CSS properties to the element.
<button class="transition duration-500 ease-in-out delay-100">Transition Me</button>
This will change the delay of the transition to 100 milliseconds.
Here are some examples of how to use the Tailwind
transition classes:
Add a smooth transition to the background color of a button when your mouse is
hovered:
<button class="transition duration-300 ease-in-out bg-sky-500 hover:bg-sky-
700">Transition Me</button>

8. Add a delayed transition to the opacity of an element when it is scrolled into view:
<div class="transition duration-500 ease-in-out opacity-0 scroll-reveal">This element
will fade in when scrolled into view.</div>
Add a complex transition to the transform property of an element when it is clicked:
<button class="transition duration-500 ease-in-out transform hover:-translate-y-
2">Transition Me</button>
These are just a few examples of how to use the Tailwind transition classes. You can use these
classes to create a variety of different effects, so be creative and experiment!
Tips for using transition classes:
Use the transition-all class to enable transitions on all properties of an element.
Use the transition-property class to specify the properties that should be transitioned.
Use the transition-duration class to specify the duration of the transition.
Use the transition-timing-function class to specify the easing function of the transition.
Use the transition-delay class to specify the delay before the transition starts.
Use the hover and other state modifiers to apply transitions to specific states.
Use the scroll-reveal plugin to create animations that are triggered by scrolling.
Below is a video on how to add animations to Tailwind:

9. Triggering Animations
Tailwind CSS provides f ways to trigger animations, including:
Hover: To trigger an animation on hover, simply add the hover class to the element you want
to animate.
Click: To trigger an animation on click, add the active class to the element you want to
animate.
On-page load: To trigger an animation on page load, add the animate class to the element
you want to animate. You can also use the animation-delay class to control when the
animation starts.
<div class="animate-bounce">
<button class="hover:animate-spin">Hover Over Me!</button>
</div>
In this example, the animate-bounce class will cause the div to bounce on page load. The
hover:animate-spin class will cause the button to spin when the user hovers over it.
You can also apply animations to different user interactions. For example, you could use an
animation to highlight an input field when the user focuses on it, or to display a success
message when the user submits a form.
<input type="text" class="focus:animate-pulse">
<button type="submit" class="hover:animate-pulse">Submit</button>

10. In this example, the input field will pulsate when the user focuses on it, and the submit button
will pulsate when the user hovers over it.
Tailwind CSS provides a lot of flexibility for triggering animations. You can use the built-in
classes, or you can write your own custom CSS to trigger animations on any event you want.
Combining Animations
To combine multiple animations in Tailwind CSS, simply add the respective animation classes to
the element you want to animate. The order of the classes is important, as the last class listed
will have the highest priority.
For example, to make an element spin and bounce at the same time, you would add the
animate-spin and animate-bounce classes to the element. The element will first spin, then
bounce and then continue to spin and bounce simultaneously.
Here is an example:
<div class="animate-spin animate-bounce">
Spin Bounce
</div>
You can also combine animation classes with other Tailwind CSS utilities, such as transition
classes and pseudo-classes. For example, to make an element fade in and out when you hover
over it, you could use the following code:
<div class="transition-opacity duration-500 ease-in-out">
<div class="opacity-0 hover:opacity-100">
This element will fade in on hover.

11. </div>
</div>
When combining animation classes, it is important to keep in mind the following:
The order of the classes is important, as the last class listed will have the highest priority.
Animation classes can be combined with other Tailwind CSS utilities, such as transition
classes and pseudo-classes.
Be careful not to overdo it with animations, as this can make your website look cluttered and
unprofessional.
Here are some additional examples of how to combine animations in Tailwind CSS:
Make an element pulse and fade at the same time: animate-pulse animate-fade
Make an element slide in from the top and rotate at the same time: animate-slide-in animate-
rotate
Make an element scale up and change color when you hover over it: hover:animate-scale
hover:text-red-500
Make an element bounce and shake when you click on it: active:animate-bounce
active:animate-shake
With a little creativity, you can use Tailwind animations to create all sorts of interesting and
engaging effects on your website.
How to Create Custom Animations
To create custom animations in Tailwind CSS, you can use the @keyframes rule. This rule
allows you to define the animation steps, or keyframes, for your custom animations. Each
keyframe represents a different state of the animation, and you can specify the CSS properties
that will be applied to the element at that state.
Once you have defined your keyframes, you can then use the animation property to apply the
animation to an element. The animation property takes two values: the name of your keyframe
rule and the duration of the animation.

12. Here is an example of a custom animation that uses the @keyframes rule:
@keyframes my-custom-animation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(0);
}
}
.my-custom-element {
animation: my-custom-animation 1s ease-in-out;
}
This animation will cause the .my-custom-element class to move 100 pixels to the right
throughout 1 second, and then move back to its original position. You can customize the
animation by changing the duration, the easing function, and the CSS properties that are
applied at each keyframe.
You can also use the Tailwind CSS configuration to modify the default animation settings. For
example, you can change the default animation duration, the default easing function, or the
default animation delay.
To do this, open the tailwind.config.js file and add the following code to the theme object:
// tailwind.config js file
theme: {
extend: {
animation: {
duration: '1s', // Default animation duration
easing: 'ease-in-out', // Default easing function
delay: '0s', // Default animation delay
},
},
}
Once you have made your changes, run the npm run build command to rebuild your Tailwind
CSS configuration.
Now, all of your animations will use the new default settings. You can still override the default
settings on a case-by-case basis by using the animation-duration, animation-easing, and
animation-delay properties.

13. Best Practices
Choose the appropriate animation for the use case. Not all animations are created equal.
Some animations are better suited for certain tasks than others. For example, a pulse
animation might be a good choice for a button that you want to draw attention to, while a fade
animation might be a better choice for an element that you want to appear or disappear
gradually.
Consider performance. Animations can add a lot of visual interest to your website, but they
can also harm performance, especially if they are used excessively. To avoid performance
issues, try to use animations sparingly and make sure to optimize them whenever possible.
Here are a few tips for optimizing animations:
Avoid using animations on elements that are not visible on the page.
Use shorter animation durations.
Use simpler animation effects.
Use @media queries to disable animations on smaller screens or devices.
Use transitions to control animation timing. Transitions allow you to control how quickly
and smoothly an element animates from one state to another. This can be useful for creating
more natural and polished animations.
Combine animations to create complex effects. You can combine multiple animation
classes to create complex and interesting effects. For example, you could combine a fade
animation with a scale animation to create an element that fades in and then scales up.
Use the @keyframes rule to create custom animations. If you need to create a custom
animation that is not included in the default Tailwind CSS animation classes, you can use the
@keyframes rule. This allows you to define your animation steps and timings.
Here are some additional tips for using Tailwind CSS
animations effectively:
Use the animate-none utility to disable animations on specific elements. This can be
useful if you need to disable an animation for performance reasons or because it conflicts with
another animation.
Use the motion-safe and motion-reduce utilities to accommodate users who prefer
reduced motion. These utilities allow you to disable animations for users who have enabled
the “Reduce Motion” preference in their system settings.
Test your animations on different browsers and devices. Make sure that your animations
work as expected on all major browsers and devices.

14. Final Note on Tailwind CDN
Tailwind CSS animations are a powerful tool for adding dynamic and engaging elements to your
website. By understanding the basic concepts and features of Tailwind CSS animations, you
can create a variety of effects, from simple fades to complex choreography.
In this article, you learned that Tailwind CSS provides a variety of built-in animation classes, and
also the ability to create custom animations. I walked you through using transition classes to
control the timing and ease of animations.
Also, we took a look at how keyframe animations allow for more complex animation effects.
Animations can be triggered using a variety of events, such as hover, click, and on-page load.
Multiple animation classes can be combined to create complex effects.
Further Readings
Here are a few additional resources for further learning:
Tailwind CSS Animation Documentation
Tailwind CSS Animation Tutorial
Tailwind CSS Animation Examples
Happy animating! 🚀🚀
📝If you still have trouble animating, check out Purecode.ai custom-built TailwindCSS
components

15. Share this:
Emmanuel Uchenna
More blogs
CSS
Why You Need to Use CSS Minification for Web Performance
01 Mar 2024 12 min read
CSS
Top CSS Shape Generator Tools That Will Make Your Life Easier
26 Feb 2024 12 min read
   

16. CSS
Best CSS Background Generator Tools for Stunning Websites
26 Feb 2024 9 min read
Tailwind Blogs
Tailwind Dropdown
Tailwind Cards
Tailwind Config
Tailwind Buttons
Tailwind Breakpoints
Tailwind Grid
MUI Blogs
MUI Typgraphy
MUI Tooltip
MUI Appbar
MUI Stack
MUI Slider
MUI Select
Bootstrap Blogs
Bootstrap vs MUI