Tailwind Animation
With Tailwind CSS animation classes, you can easily add effects to elements and engaging and interactions
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
This element will pulse with animation.
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
Class | Properties |
---|---|
.animate-none | animation-none |
.animate-spin | animation: spin 1s linear infinite; @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } |
animate-ping | animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; @keyframes ping { 75%,100% { transform: scale(2); opacity: 0; } } |
animate-pulse | animation: pulse 2s cubic-bezier (0.4, 0, 0.6, 1) infinite; @keyframes pulse { 0%,100% {opacity: 1; } } |
Windframe Tailwind blocks
Windframe is a drag and drop builder for rapidly building tailwind css websites and UIs