Tailwind Animation

Tailwind CSS provides a powerful and customizable set of utility classes for adding animations to your web pages. With Tailwind's animation classes, you can easily add eye-catching motion effects to elements, creating engaging and interactive user experiences.

Applying Tailwind Animation

To apply animations in Tailwind CSS, you can use the animate-{name} utility class, where {name} represents the name of the animation. Tailwind CSS includes a variety of predefined animation classes that you can use out of the box.

<div class="animate-pulse ...">
  This element will pulse with animation.
</div>

Preview

Predefined Tailwind Animation Classes

Tailwind CSS provides several predefined animation classes that you can use without any additional configuration. Some of the commonly used ones include:

• animate-pulse: Causes the element to continuously fade in and out, creating a pulsating effect.

• animate-spin: Rotates the element 360 degrees in a clockwise direction.

• animate-bounce: Causes the element to bounce up and down.

• animate-blink: Creates a blinking effect, where the element alternates between visible and hidden states.

• animate-slide-{direction}: Slides the element in the specified direction, such as animate-slide-left, animate-slide-right, animate-slide-up, animate-slide-down.

Customizing Tailwind Animation

Tailwind CSS also allows you to define your own custom Tailwind animation using the @keyframes directive in your CSS. This gives you complete control over the animation properties, timing, and effects. Here's an example:

<style>
  @keyframes slide-in {
    0% {
      transform: translateX(-100%);
      opacity: 0;
    }
    100% {
      transform: translateX(0);
      opacity: 1;
    }
  }
</style>

<div class="animate-slide-in">
  This element will slide in with a custom animation.
</div>

In the above example, a custom tailwind animation called slide-in is defined using the @keyframes directive. The animation gradually moves the element from left to right and fades it in. The animate-slide-in class is then applied to the <div> element to animate it using the custom tailwind animation.

Responsive Tailwind Animation

Tailwind CSS allows you to apply animations responsively at different breakpoints. To use responsive tailwind animation classes, you can append the breakpoint prefix to the animation class. For example, md:animate-pulse applies the pulse animation starting from the medium breakpoint and above.

<div class="animate-pulse md:animate-none">
  This element will pulse by default, but the animation will be disabled starting from the medium
  breakpoint.
</div>

In the above example, the animate-pulse class is applied by default, causing the element to pulse. However, starting from the medium breakpoint and above (md:animate-none), the animation is disabled.

Tailwind Animation Class Table

Windframe Tailwind blocks

landing page

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically reduce the amount of time we spend doing that. so we can focus on building some other aspects of the project.

Contrast Bootstrap PRO consists of a Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.