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

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 wellexecuted

animations.

Why Tailwind CSS Animations?

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:

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:

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:

<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>

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>

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:

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>

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.

</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 animaterotate

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.

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.

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.

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

‘Original article published here’