Mastering Tailwind Animations for Beginners

Learn how to use Tailwind CSS to create attractive website animations.

What is Tailwind CSS?

In today’s web world, user experience reigns supreme. A well-designed website with micro-animations can significantly enhance the user experience. Subtle movements can guide users, highlight important elements, and create a more interactive feel. Animations can also turn user actions such as button clicks or form submissions into an interaction between the user and the website. By incorporating these elements, we can create a website that feels polished and engaging.

A good framework for this task is Tailwind CSS. Tailwind CSS can enhance the interactivity of a website as it offers a collection of pre-built utility classes specifically designed for this cause. These classes eliminate the need for writing complex CSS code, making it easy to add animations to a website. With Tailwind CSS, we can focus on the creative aspects of website animations without getting bogged down in the technical details.

In this guide, we’ll have a detailed discussion on mastering website animations using Tailwind CSS. We’ll not only learn about animation utilities and advanced transitions in Tailwind CSS but also get our hands on some practical examples that exhibit these topics in use.

How to use Tailwind CSS

Let’s dive deeper into the exciting world of Tailwind CSS animation utilities and look at some examples.

To begin with, we can use the hover prefix, the foundational utility class, to apply hover animations to an element. Let’s see how to create a simple hover animation using Tailwind CSS:

<div class="container bg-blue hover:bg-blue-500">
  <h3>Login</h3>
</div>

In the above code snippet, we used the hover prefix to apply hover animations to the container. The hover:bg-blue-500 class indicates that the background color of the container changes from blue to blue-500 when we hover on it.

Loading and Bounce Animation Using Tailwind CSS

Besides the hover prefix, we can also use the animate class, another foundational utility class, which is often combined with other utility classes to create specific effects. For instance, animate-spin adds spin animations and animate-bounce adds bounce animations to an element. These animations draw attention to specific elements and provide a visual cue to the users without being overwhelming.

First, let’s make a loading animation using Tailwind CSS:

<div class="container">
  <h3>Loading</h3>

  <div class="loader border-solid border-2 border-lightblue border-t-white animate-spin"></div>
</div>

In the above, all the classes prefixed with the border class help in creating a loader for an animation. Besides that, the animate-spin class adds spin animations to the loader.

Let’s create a bouncing animation using Tailwind CSS:

<div class="container animate-bounce">
  <h3>Loading</h3>
</div>

In the above code, the animate-bounce class adds bounce animations to the container.

Manual Dark Mode Animation Using Tailwind CSS

Tailwind CSS offers a dark variant that enables us to apply dark mode styles to an element. This variant uses the CSS media feature named prefers-color-scheme, which indicates that the dark mode styles are automatically applied to the element when the operating system is in dark mode.

If we instead want to apply the styles to the element by manually enabling the dark mode for the website using the dark class, we need to go to tailwind.config.js and change the value of darkMode from media to selector:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  darkMode: 'selector'
}

Now, let’s create a manual dark mode animation using Tailwind CSS:

<html class="dark">

<body class="bg-white dark:bg-black">
  <div class="container">
    <button>Login</button>
  </div>
</body>

</html>

Here, we enabled the dark mode for the website by adding the dark class to the <html> element. As a result, the dark:bg-black class changes the background color of the <body> element from white to black. The following output shows how the website looks before and after enabling dark mode:

Dark Mode

Advanced Tailwind CSS Transition Animations

Tailwind CSS also provides a set of transition utilities that enable us to add smooth transition animations to an element. These utilities are prefixed with the transition class, such as transition-colors and transition-opacity. Each of them specifies three properties with unique values that are applied to the target element:

transition-property: The target properties for the transition (i.e., width, color, etc.)
transition-timing-function: The timing function for the transition (i.e., ease-in, ease-out, etc.)
transition-duration: The duration of the transition (i.e., 400ms, 800ms, etc.)

We can also use the transition class itself without appending anything to it and then add separate classes like duration and delay to integrate transition animations into an element.

Now, let’s create an advanced transition animation using Tailwind CSS:

<div class="container transition ease-in duration-1000 bg-blue hover:bg-blue-500 w-[96px] hover:w-[150px]">
  <h3>Hover</h3>
</div>

In the above code block, we used the transition class itself without appending any additional utilities. Then, we added two classes:

ease-in: Sets the value of transition-timing-function to ease-in (no class is needed as a prefix in this case)
duration-1000: Sets the value of transition-duration to 1000ms

Moreover, the hover:w-[150px] class indicates that the width of the container transitions from 96px to 150px when we hover over it.

Review

Throughout this article, we discussed how to use Tailwind CSS to produce attractive and interactive website animations. We discussed Tailwind CSS animation utilities and transition animations as well as navigated through some interesting examples that show these topics in practice.

By mastering these Tailwind CSS animations, we’ll be able to add exciting and user-friendly animations to our websites. This will enable us to create truly dynamic web experiences that leave a lasting impression on the users.

If you want to learn more about transitions and animations, you can check out this course on Codecademy. This course provides a detailed explanation of all the things that you need to know about adding dynamic interactivity to your websites using CSS transitions and animations.

To see what else you can create using CSS in general, check out some articles located here: HTML & CSS Articles.

Author

Codecademy Team

'The Codecademy Team, composed of experienced educators and tech experts, is dedicated to making tech skills accessible to all. We empower learners worldwide with expert-reviewed content that develops and enhances the technical skills needed to advance and succeed in their careers.'

Meet the full team