Tailwind animation-How to create Tailwind CSS Animation
Tags: tailwindcss, frontend, tooling, tutorial
Published: 2022-09-12 13:25:12

---
title: Tailwind animation-How to create Tailwind CSS Animation
published: true
date: 2021-01-10 01:16:04 UTC
tags: ["tailwindcss", "frontend", "tooling", "tutorial"]
canonical_url: https://www.devwares.com/blog//create-animation-with-tailwind-css/
---

## Tailwind CSS Animations

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

Web Animations 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 are looking 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.

However, Creating animations in Tailwind has proved easier to do and from scratch. This is because we have access to styling out of the box.

In this tailwind CSS tutorial, we are going to look at

- What is Animation
- How to create TailwindCSS Animation.
- How to use customized Tailwind animation.

## Table of Content

- What is Animation
- How do you animate with tailwind CSS
- Prerequisite
- Tailwind animation: Building our Loader
- Example Tailwind Animations
- How do I add Custom Animation to Tailwind?
- Best Practices for Tailwind CSS Animation
- Conclusion

## What is Animation

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

## How do you animate with tailwind CSS

Adding animation with Tailwind is as easy as simply appending the class `animate-` to the element you wish to animate.
Tailwind CSS also offers 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.

![Tailwind CSS Animations](/blog/images/create-animations-1.png)

## Prerequisite

To make the most of this Tailwind CSS tutorial, you need the following

- Basic Knowledge of HTML and CSS animations.
- Tailwind CSS installed in your project. To figure out how to do this, you can check out our article on installing Tailwind CSS![here](https://tailwindcss.com/docs/installation).

## Tailwind animation: Building our Loader

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

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

```

Your project's HTML head should be like this

```js
<!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 kinds of animations with four different Tailwind 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. These class names are:

- `m-auto`, centers your `div` horizontally. Offers the same functionality as the native CSS `margin: auto`.
- `ml-10`, gives your `div` a margin-left of 10px. Offers the same functionality 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 functionality as the native CSS `width: 20px` .

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

- `animate-spin`, gives your element a linear spin animation.
- `animate-ping`, makes the element scale and fade out.
- `animate-bounce`, 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](/blog/images/create-animations-2.png)

## Example Tailwind Animations

Here are a few examples of Tailwind CSS animations that you can use as inspiration for your projects:

- Fade-in animation: Apply the animate-fade-in class to smoothly fade in an element when it becomes visible on the screen.

- Slide-up animation: Use the animate-slide-up class to slide an element upwards into view with a subtle animation effect.
- Bounce animation: Apply the animate-bounce class to create a bouncing effect on an element, adding a playful touch to your design.
- Rotate animation: Use the animate-rotate class to apply a rotating effect to an element, making it visually engaging.

## How do I add Custom Animation to Tailwind?

Tailwind animations are not limited to only the animations mentioned above, you have the freedom to create more complex, and more interesting Tailwind animation plugins. You can even increase your tailwind animation speed. 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 easily customize your Tailwind animation by visiting the configuration file.

In this configuration file, you can add, remove, and change animations in the `tailwind.config.js` file. We define the animation behavior in the `animation` section of the `module.exports` object.

```js
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.

```js
// tailwind.config.js

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

With the `@keyframes` we define the Tailwind 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. You can check out the [animation documentation](https://www.devwares.com/docs/contrast/react/components/animations/).

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

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

## Best Practices for Tailwind CSS Animation

When using Tailwind animation, keep the following best practices in mind:

1. Use animations sparingly and purposefully to avoid overwhelming the user.
2. Consider the context and purpose of the animation,
   ensuring it [aligns](https://www.devwares.com/tailwindcss/classes/tailwind-align-items/) with your user's context and enhances the overall user experience.

3. Optimize performance by using hardware-accelerated properties for smoother animations.

4. Test your animations on different devices and browsers to ensure consistent behavior.

5. Leverage the power of responsive design by creating animations that adapt to various screen sizes.

## Conclusion

Tailwind CSS provides a seamless and efficient way to create stunning animations for your website. By following the steps outlined in this article, you can easily integrate Tailwind CSS animation into your projects and enhance the user experience. Remember to use animations thoughtfully, considering the context and purpose of each animation. With Tailwind CSS's extensive animation utilities and customization options, you have the flexibility to create unique and captivating effects that will impress your website visitors.

## Resources

- [How to use tailwind CSS in HTML]  (https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML)

- [Why tailwind CSS is good](https://www.devwares.com/blog/why-tailwind-css-is-good)

- [How to use Tailwind CSS in Nextjs](https://www.devwares.com/blog/tailwind-css-in-nextjs)

- [How to create Tailwind CSS Components for your Website](https://www.devwares.com/blog/how-to-create-tailwind-css-components-for-your-website)

- [How to create Tailwind CSS Animation](https://www.devwares.com/blog/create-animation-with-tailwind-css/)

- [Tailwind grid-How to use tailwind CSS grid templates in your project](https://www.devwares.com/blog/how-to-add-tailwind-css-grid-to-your-project/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind form-How to create and style a Responsive Form using Tailwind CSS](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/)

- [Tailwind CSS Flex: How to use Tailwind CSS Flex](https://www.devwares.com/blog/how-to-use-tailwind-css-flex/)

- [How to use tailwind CSS padding, margin and border in your project](https://www.devwares.com/blog/how-to-use-tailwind-css-padding-margin-and-border-in-your-project/)

- [Tailwind CSS CDN-How to use the Tailwind CSS JIT CDN](https://www.devwares.com/blog/how-to-use-the-tailwind-css-JIT-CDN/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [How to use Tailwind CSS in HTML](https://www.devwares.com/blog/how-to-use-tailwind-css-in-HTML/)

- [Tailwind CSS table-How to Create Tailwind CSS tables](https://www.devwares.com/blog/how-to-create-tailwind-css-tables/)

- [How to set up your first Tailwind CSS Project](https://www.devwares.com/blog/setting-up-your-first-project-using-tailwind-css/)

- [Why is tailwind CSS better than other CSS framework](https://www.devwares.com/blog/why-tailwind-css-is-good/)

- [10 tailwind CSS templates and themes](https://www.devwares.com/blog/tailwind-css-10-templates-and-themes/)

- [How to add tailwind CSS colors and Fonts to your project](https://www.devwares.com/blog/how-to-add-tailwind-css-colors-and-fonts-to-your-project/)

- [Differences between Tailwind CSS and SASS](https://www.devwares.com/blog/differences-between-tailwind-css-and-sass/)

- [Differences Between Tailwind CSS and Bootstrap](https://www.devwares.com/blog/diffrences-between-tailwind-css-and-bootstrap/)

- [10 Awesome projects built with Tailwind CSS](https://www.devwares.com/blog/awesome-10-projects-built-with-tailwind/).

- [How to install Tailwind CSS in Vue.js](https://www.devwares.com/blog/how-to-install-tailwind-css-in-vuejs/).

- [How to use Tailwind CSS in React](https://www.devwares.com/blog/how-to-use-tailwind-css-in-react/)

- [How to install Tailwind CSS with Laravel](https://www.devwares.com/blog/how-to-install-tailwind-css-in-laravel/)

- [How to create react date picker](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/how-to-create-and-style-a-responsive-form-using-tailwindcss/).

- [How to create a beautiful React multiselect](https://www.devwares.com/blog/create-multiselect-with-contrast/).

- [How to create a beautiful React Bootstrap progress bar](https://www.devwares.com/blog/create-progress-with-contrast/).

- [How to create a beautiful React Bootstrap select with icons](https://www.devwares.com/blog/create-select-with-contrast/).

- [How to create a beautiful Bootstrap 5 stepper](https://www.devwares.com/blog/create-stepper-with-contrast/)

- [How to create a beautiful React Bootstrap table]
(https://www.devwares.com/blog/create-tables-with-contrast/)

- [How to create beautiful React Bootstrap tabs](https://www.devwares.com/blog/create-tabs-with-contrast/)

- [How to create a Beautiful Responsive Navigation bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-create-a-beautiful-responsive-navbar-using-tailwind-css/)

- [Tailwind Modal-How to create a React Modal using Tailwind CSS.](https://www.devwares.com/blog/how-to-create-a-react-modal-using-tailwind-css/)

- [How to create a Bootstrap 5 Modal.](https://www.devwares.com/blog/how-to-create-a-bootstrap5-modal/)

- [How to create a beautiful Bootstrap Data table with Icons](https://www.devwares.com/blog/create-datatable-with-contrast/)

- [How to create a React date picker.](https://www.devwares.com/blog/create-datepicker-with-contrast/)

- [React bootstrap 5 form-How to create React forms](https://www.devwares.com/blog/create-forms-with-contrast/)

- [How to create a Angular Bootstrap Sidebar](https://www.devwares.com/blog/how-to-create-an-angular-bootstrap-sidebar/)

- [How to use Bootstrap in React Using a React Library](https://www.devwares.com/blog/using-bootstrap-in-react/)

- [How to Create React Tabs with Tailwind CSS](https://www.devwares.com/blog/how-to-create-react-tabs-with-tailwind-css/)

- [How to implement dark mode in React using tailwind css](https://www.devwares.com/blog/how-to-implement-dark-mode-in-tailwind-css/)

- [How to Implement a React Step Progress Bar Using Tailwind CSS](https://www.devwares.com/blog/how-to-implement-a-react-step-progress-bar-using-tailwind-css/)