How to use CSS Animations with Tailwind CSS ?
Last Updated :
15 Apr, 2024
Tailwind CSS classes are used to style elements and apply animations effortlessly. Utilize Tailwind's animation utility classes to add dynamic visual effects. Combine Tailwind CSS with custom CSS animations for versatile and engaging web designs.
Tailwind CSS Animation Utility Classes
In this approach, the 'animate-bounce', 'animate-spin', 'animate-pulse', and 'animate-ping' classes trigger corresponding animations, such as bouncing, spinning, pulsing, and pinging, respectively. Each animated element is styled with background color and text color classes for visual appeal.
Example: The example below uses pre-built utility classes from Tailwind CSS to easily apply animations to elements.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS Animation Utility Classes</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div class="animate-bounce bg-blue-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Bouncing Animation
</div>
<div class="animate-spin bg-green-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Spinning Animation
</div>
<div class="animate-pulse bg-purple-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Pulsing Animation
</div>
<div class="animate-ping bg-yellow-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Ping Animation
</div>
<div class="animate-bounce bg-red-500 text-white
px-4 py-2 rounded-md shadow-md mb-4">
Bouncing Animation
</div>
</div>
</body>
</html>
Output:
CSS Animations with Tailwind CSS and JavaScript
In this approach, the 'clickMe' element, styled with Tailwind CSS classes, toggles a spinning animation when clicked. This animation is defined using the @keyframes rule in the embedded CSS, rotating the element 360 degrees. Additionally, hovering over the second element triggers a bouncing animation.
Example: The example below shows CSS Animations with Tailwind CSS and JavaScript.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>CSS Animations with Tailwind CSS and JavaScript</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<style>
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div id="clickMe"
class="bg-blue-500 text-white px-4
py-2 rounded-md shadow-md
mb-4 cursor-pointer
hover:animate-pulse"
onclick="toggleSpin()">
Click to Spin
</div>
<div class="bg-green-500 text-white px-4
py-2 rounded-md shadow-md mb-4
cursor-pointer hover:animate-bounce">
Hover Animation
</div>
</div>
<script>
function toggleSpin() {
let clickMe = document.getElementById('clickMe');
clickMe.classList.toggle('animate-spin');
clickMe.classList.contains('animate-spin') ?
clickMe.style.animation = "spin 2s linear infinite"
: clickMe.style.animation = "";
}
</script>
</body>
</html>
Output:
Tailwind CSS and Internal CSS Styling
In this approach, The elements utilize Tailwind CSS classes for styling, and the animations are applied using the defined internal CSS animations. We've added two new animations: slide-in-bottom and spin-scale. Each animation is defined using internal CSS. The first element slides in from the bottom with fading opacity, defined by the slideInBottom keyframes animation. The second element combines scaling and spinning effects
Example: The example below shows CSS Animations with Tailwind CSS.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Tailwind CSS and Internal CSS Styling</title>
<link href=
"https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet">
<style>
.slide-in-bottom {
animation: slideInBottom 1s forwards;
}
@keyframes slideInBottom {
0% {
opacity: 0;
transform: translateY(100%);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.spin-scale {
animation: spinScale 1s ease-in-out infinite alternate;
}
@keyframes spinScale {
0% {
transform: scale(1) rotate(0deg);
}
100% {
transform: scale(1.2) rotate(360deg);
}
}
</style>
</head>
<body class="bg-gray-100 flex justify-center
items-center h-screen">
<div class="text-center">
<div class="slide-in-bottom bg-blue-500
text-white px-4 py-2 rounded-md
shadow-md mb-4 cursor-pointer
hover:bg-blue-600">
Slide In from Bottom</div>
<div class="spin-scale bg-green-500 text-white
px-4 py-2 rounded-md shadow-md mb-4
cursor-pointer hover:bg-green-600">
Spin and Scale</div>
</div>
</body>
</html>
Output:
Similar Reads
How to make a CTA Animation with Tailwind CSS ?
To enhance the engagement level of your website's Call-to-Action (CTA) elements we use Tailwind CSS utility classes. By directly customizing transition effects with Tailwind CSS, you can effortlessly introduce captivating animation effects to your CTAs, improving user interaction and overall user ex
2 min read
How to use Tailwind CSS with esbuild ?
Tailwind CSS is a utility-first CSS framework for building rapid custom UI. It is a highly customizable, low-level CSS framework that gives you all of the building blocks that you need. An esbuild is a bundler for the web project that brings the build tool for performance enhancement, along with fa
3 min read
How to use animation-delay in CSS ?
The animation-delay property in CSS specifies a delay before an animation starts. It defines how long the browser should wait before starting the animation after it has been applied to an element. This allows you to control the timing of your animations, creating staggered or timed effects. The anim
2 min read
How to use calc() in Tailwind CSS?
The calc() function in CSS allows you to perform calculations for property values dynamically. While Tailwind CSS doesn’t directly support calc(), you can use it inline or with custom utilities. 1. Using Inline StylesYou can use calc() directly within the style attribute for dynamic property values.
2 min read
How to Create Animated Loading Button using Tailwind CSS ?
An Animated Loading Button is a button that displays a loading spinner or animation to indicate an ongoing process, such as form submission. Using Tailwind CSS, you can create this by combining utility classes for styling and animations to visually enhance the button during loading. Table of Content
2 min read
Tailwind CSS Animation
This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used for animating elements with CSS animation. In CSS, we can do that by using the CSS animation property. Animation classes :animate-spin: This class is used to add a linear spin a
2 min read
Underline Hover Animation Effect using Tailwind CSS
The Tailwind CSS underline animation is a visual effect that can be added to any text or heading or a specific word in the web page using the Tailwind CSS utility framework. The basic function of this effect is this creates an underline animation from left to right with a smooth transition, in simpl
3 min read
Design a Progress Bar with Smooth Animations using Tailwind CSS
A progress bar is a type of component that tracks the percentage completion of a particular task and makes it visible to the users to enhance user interactivity. Steps to create the projectStep 1: Create a directory Progress Bar with files: index.html, style.css, and script.js for HTML, CSS, and Jav
3 min read
How to Create Animation Loading Bar using CSS ?
Loading Bar with animation can be created using HTML and CSS. We will create a Loader that is the part of an operating system that is responsible for loading programs and libraries. The progress bar is a graphical control element used to visualize the progression of an extended computer operation, s
3 min read
How to create a Chevron using Tailwind CSS ?
A Chevron is a basic geometric shape that is used in websites to indicate directional movements or navigation. By utilizing specific border properties and transformations, a chevron shape can be achieved without the need for custom CSS. Tailwind's utility-first approach allows for a straightforward
3 min read