How to create Tailwind CSS Animation
Tags: css, tailwindcss, programming, webdev
Published: 2021-10-10 00:13:30

---
title: How to create Tailwind CSS Animation
published: true
date: 2021-01-10 01:16:04 UTC
tags: [css, tailwindcss, programming, webdev]
canonical_url: https://www.devwares.com/blog//create-animation-with-tailwind-css
cover_image: https://www.devwares.com/blog/images/tailwind-css-animation.png
---

Web Animations make your websites come alive, when done properly they capture users attention and make for an immaculate user experience.

They have become the norm recently as developers are constantly making use of animations on their projects to make their applications interactive.

This has made many companies and websites adopt this technology on their website and applications.

When you click a button or open a website, and there are movements on the site, you look at an amination. 

In the present day, anything from a cartoon to Japanese anime is considered animation. With simple CSS and JavaScript, you can create amazing animations.

As evident as the pros to incorporating animations in your projects are, animations can prove to be really difficult to build out from scratch.

However, with Tailwind CSS we do not need to build from scratch as we get access to the styling we want out of the box by using the Tailwind CSS classes.

In today’s tailwind CSS tutorial, we are going to look at 
⦁ What is Animation 
⦁ How to create Tailwind CSS Animation. 
⦁ How to use customized animation in Tailwind CSS.

## Table of Content

⦁ What is Animation 
⦁ Prerequisite 
⦁ How to create Tailwind CSS Animation 
⦁ How to use customized animation in Tailwind CSS. 
⦁ Conclusion

## What is Animation

Animations are used to make elements move from one position to another over a period of time on your website. Aminations are often, at times, triggered by events such as scrolling, loading of webpage or applications. In this Tailwind CSS tutorial, we will look at how to use the tailwind CSS animation.

Tailwind CSS offers us some default animations such as 

⦁ Animate-spin 
⦁ Animate-bounce 
⦁ Animate-ping 
⦁ Animate-pulse

As their name implies, we will use all of this default utility class animation to build a website loader. At the end of the tailwind CSS tutorial, our project will look like the image below.

## Prerequisite
In order to make the most of this Tailwind CSS tutorial, you need the following

- Basic Knowledge in HTML and CSS animations.
- Tailwind CSS installed in your project. To figure out how to this, you can check out our article on installing TailwindCSS [here](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML).


## Building our Loader

Before we jump right in, it is imperative that you link your Tailwind CSS stylesheet to your HTML. Just like the code below

```html
<link rel="stylesheet" href="styles.css">
```

Your projects's HTML head should like this

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Website loader</title>
</head>
```

We can go ahead to build our loader.  To make our loader as rich as possible, we will create four different kind of animations with four different TailwindCSS animation classes.

```html
<body class="flex justify-center items-center bg-white-900 h-screen">
    <div class="bg-white flex space-x-2 p-5 justify-center items-center">
        <div class="m-auto ml-10 h-20 w-20 bg-blue-900 p-2 animate-spin"></div>
        <div class="m-auto ml-10 h-20 w-20 bg-purple-500 p-2 animate-ping"></div>
        <div class="m-auto ml-10 h-20 w-20 bg-green-600 p-2  animate-bounce"></div>
        <div class="m-auto ml-10 h-20 w-20 bg-blue-500 p-2 animate-pulse"></div>
    </div>
</body>
```

We use class names for our divs to affect different properties of our `div` element to . These class names are: 

- `m-auto`, centers your `div` horizontally. Offers the same functionaliity as the native CSS `margin: auto`.
- `ml-10`, gives your `div` a margin-left of 10px. Offers the same functionaliity as the native CSS `margin-left: 10px` .
- `h-20`, defines the height of your `div`. Offers the same functionality as the native CSS `height: 20px` .
- `w-20`, defines the width of your `div`. Offers the same functionaliity as the native CSS `width: 20px` .

The animation classes we use to define the animation we want in our project are :

- `animate-spin`, this gives your element a linear spin animation. 
- `animate-ping`, this makes the element scale and fade out.
- `animate-bounce`, this gives your element the illusion of bouncing.
- `animate-pulse`, this makes your element gently fade in and out.

Our animated loader should look like the image below.

![Tailwind CSS Animations](https://devwares.com/blog/images/create-animations-2.png)
 

## Custom Animations

Tailwind CSS animations are not limited to only the animations mentioned above, you have the freedom to create more complex, and more interesting animations. Asides from the `div` element we could animate other HTML elements, an example would be to animate the `button` element to make them more responsive.

With the Tailwind CSS animation, you can customize your animation to better suit your needs.
You can add, remove, change animations in the `tailwind.config.js` file. We define the animation behaviour in the `animation` section of the `module.exports` object.


```javascript
module.exports = {
    theme: {
      extend: {
        animation: {
         'spin-slow': 'spin 3s linear infinite',
        }
      }
    }
}
```

You can also use `@keyframes` to define animations not already created in native CSS.

```javascript
// tailwind.config.js

module.exports = {
    theme: {
        extend: {
            keyframes: {
                wiggle: {
                    '0%, 100%': { transform: 'rotate(-3deg)' },
                    '50%': { transform: 'rotate(3deg)' },
                }
            }
        }
    }
}
```

With the `@keyframes` we define the animation for when it is 0% and 100% complete, we want to rotate the element 3 degrees left, and when it is  50% complete we want to rotate the element 3 degrees right.  

After creating the animation we can reference the wiggle animation in the `animation` section of our `module.exports` object.

```javascript
module.exports = {
    theme: {
      extend: {
        animation: {
            wiggle: 'wiggle 1s ease-in-out infinite',
        }
      }
    }
}
```

Once you have added your custom animation, remember to run `npm run build` to build it to your CSS.

###Conclusion

In this article we learned what a web animation is, how to animate elements and  create custom animations. We used this knowledge to create loaders in our applications.

## Design and code Tailwind CSS websites 3x faster

We created a tool to visually build Tailwind CSS components, prototypes, websites, and web apps. Ship projects faster using an intuitive tailwind builder and editor.[Try Windframe out for free.](https://www.devwares.com/windframe)

![WINDFRAME](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h8w3qu4a93bdkhtjnhbh.png)