Guides · · Maxwell Prehoda
13 Tailwind Animation Examples, From the Four Built-ins to Full Component Kits
Tailwind ships four animations (spin, ping, pulse, bounce), a full set of transition utilities, and since v4 a one-block way to add your own keyframes in CSS with @theme. Most of what people call "Tailwind animation" is one of those three things, or a plugin or component kit built on top of them.
This list goes from the built-ins up to the kits. Each entry gives the actual class names, says what it is best for and what will trip you up, and notes whether it works with Tailwind v4 or still needs a v3-style config. Where it helps, a pure CSS version from our directory plays live so you can see the motion before you install anything.
1. Tailwind's four built-in animations: Best for spinners, live badges, skeletons and scroll hints
Platform: Tailwind CSS core, no plugin
Each built-in has one job, and the docs say which. animate-spin (1 s linear, forever) is for loading indicators, shown on a disabled "Processing" button. animate-ping scales to 2x and fades, like a radar blip, and is meant to sit behind a solid dot for notification badges. animate-pulse fades to 50% opacity and back over 2 s, for skeleton loaders. animate-bounce drops and lifts by a quarter of the element's height for "scroll down" arrows.
Delays and durations take arbitrary values, so a three-dot typing indicator is just three spans with animate-bounce and [animation-delay:0.15s] and [animation-delay:0.3s].
Our Pulse Loader below is the ping pattern in pure CSS, and its page includes the Tailwind version: an animate-ping span layered behind a solid dot.
Watch out for: Infinite animations keep running off screen and for people who asked for less motion. Prefix them with motion-safe: so they only run when the user has not requested reduced motion.
2. Custom keyframes with @theme in v4: Best for adding your own named animation in five lines of CSS
Platform: Tailwind CSS v4
In v4 you define animations next to the rest of your theme, in CSS: inside @theme, declare --animate-wiggle: wiggle 1s ease-in-out infinite; and put the @keyframes wiggle block right beside it. Tailwind then generates the animate-wiggle class. No tailwind.config.js needed.
For one-offs there are two escape hatches: animate-[wiggle_1s_ease-in-out_infinite] for an arbitrary value, and animate-(--my-animation) to read a custom property, which the docs call shorthand for animate-[var(--my-animation)].
Our Wiggle keyframe below is a ready-made version of the docs' example name: a quick side-to-side rotation that dies out, then a long pause. Copy its @keyframes into your @theme block and it becomes a utility.
Watch out for: Arbitrary values replace spaces with underscores, so animate-[...] strings get unreadable fast. Anything you use twice deserves a name in @theme.
3. Transitions and the starting variant: Best for hover states and elements that animate in on appear
Platform: Tailwind CSS v4 core
Most UI motion is not a keyframe at all. The transition class transitions colors, opacity, shadows, transforms, filters and more, at 150 ms with cubic-bezier(0.4, 0, 0.2, 1) by default. Add duration-200, ease-out and a hover:-translate-y-0.5 hover:shadow-lg and you have the classic lift button.
v4 added the starting variant for @starting-style, which the release post sums up as animating elements as they appear "without the need for any JavaScript at all". On a popover, transition-discrete starting:open:opacity-0 makes it fade in when it opens.
Our Lift Button below has a Tailwind version on its page built exactly this way, with active:translate-y-0 so it settles under the press.
Watch out for: The motion-reduce docs example has to undo both the transition and the hover transform. Using motion-safe:transition motion-safe:hover:... is shorter when there is a lot to undo.
4. tw-animate-css: Best for shadcn/ui projects and enter and exit animations
Platform: Pure CSS plugin for Tailwind v4, MIT
On March 19, 2025, shadcn/ui deprecated tailwindcss-animate in favor of tw-animate-css, and new shadcn projects install it by default. It is a v4-compatible rewrite in plain CSS: one @import "tw-animate-css"; and no JavaScript plugin.
The model is composable classes. animate-in or animate-out is the base, then you add effects such as fade-in, zoom-in or slide-in-from-top, plus duration, delay, ease, repeat and fill-mode utilities. It also ships accordion-down, accordion-up, collapsible-down, collapsible-up and caret-blink, which expect a height variable such as --radix-accordion-content-height.
Our Fade In Down below shows the kind of entrance it composes: a short drop from above while scaling up from 96 percent, anchored at the top edge like a dropdown.
Watch out for: The README says it only covers part of the original plugin, so it may not be a drop-in replacement. Check every animate-in class after migrating.
5. tailwindcss-animate by Jamie Kyle: Best for existing Tailwind v3 codebases that already use it
Platform: Tailwind v3 JavaScript plugin, MIT
The plugin that defined the animate-in vocabulary: fade-in-{amount}, zoom-in-{amount}, spin-in-{amount}, slide-in-from-{direction}-{amount}, and the matching out classes, with duration, delay, ease, fill-mode, direction and repeat utilities. You add it with require("tailwindcss-animate") in the plugins array of tailwind.config.js.
It powered shadcn/ui's open and close animations until 2025, so a lot of production React code still uses it. If that is your codebase, it keeps working.
For anything new on v4, use tw-animate-css instead; the class names are close enough that most markup carries over.
Watch out for: It is a JavaScript plugin. On v4 it only loads through the legacy @plugin directive, and shadcn/ui no longer installs it.
6. Tailwind CSS Animated by NEW DATA SERVICES: Best for marketing pages that want ready-made attention effects
Platform: Plugin for v4 and v3, MIT
A larger set of premade animations with an interactive configurator: wiggle, wiggle-more, jump, jump-in, jump-out, shake, fade-up, fade-down, fade-left, fade-right, flip-up, flip-down, rotate-x and rotate-y, alongside the built-ins.
Its control utilities are the useful part: animate-once, animate-twice and animate-infinite for iteration count, animate-duration-300, animate-delay-300 and animate-ease-out, with arbitrary values and, on v4, bare numbers like animate-duration-1234. On v4 it installs with @import "tailwindcss-animated" after Tailwind; on v3 it is a config plugin.
Our Jump below shows the kind of character these presets add: a crouch, a stretch on take-off and a squash on landing, in plain CSS.
Watch out for: Attention effects that loop forever get ignored after the first few seconds and annoy everyone else. Use animate-once or a short iteration count for anything that is not a loader.
7. tailwindcss-motion by Rombo: Best for composing entrances from presets with a visual editor
Platform: Tailwind plugin, MIT, plus browser extension
tailwindcss-motion uses a motion- prefix for both presets and building blocks. Presets include fade, slide, blur, pop, shake, bounce, confetti, typewriter, wobble and float (motion-preset-bounce, motion-preset-typewriter-[24]); building blocks look like motion-translate-y-in-75, motion-rotate-in-[0.5turn] and motion-opacity-in-0.
Rombo also makes a browser extension with a visual animator that works on any site or localhost and exports code to Tailwind CSS, Framer Motion, GSAP and others, which is handy when a designer wants to tune timing without editing classes.
Our Pop below is a pure CSS take on the pop preset: a quick dip, a spring past full size and a settle, all in half a second.
Watch out for: The README shows only the v3 config setup with require("tailwindcss-motion"). Check its docs for v4 support before you build on it in a CSS-first project.
8. Headless UI Transition: Best for animating menus and dialogs that mount and unmount
Platform: React + Tailwind, by Tailwind Labs
The hardest Tailwind animation is the exit: an element that unmounts cannot run a transition. Headless UI v2 solves it with data attributes. The Transition component adds data-closed before entering and while leaving, plus data-enter, data-leave and data-transition, and waits for the transition to finish before unmounting.
So the whole fade is one class string: transition duration-300 ease-in data-closed:opacity-0. Stack variants to make enter and leave differ, such as data-enter:data-closed:-translate-x-full for a panel that slides in but fades out, and nest TransitionChild components to coordinate a backdrop and a panel.
Our Slide In Down below shows the shape most dropdowns use: it drops out of its own top edge, overshoots a touch and settles.
Watch out for: It is React (and Vue) only. In other frameworks, use the starting variant and transition-discrete for entrances, and handle exits with your framework's own transition hooks.
9. Magic UI: Best for landing pages built with shadcn/ui
Platform: React + Tailwind + Motion, free and open source
Magic UI is a library of 150+ animated components and effects built with React, TypeScript, Tailwind CSS and Motion, and it pitches itself as a companion to shadcn/ui. The core components are free and open source; Magic UI Pro sells landing-page blocks and templates on top.
It is the right pick when you want a finished, animated marketing section and your stack is already React and shadcn. You copy the component into your project, so you can edit the Tailwind classes directly.
Because the motion runs through Motion (formerly Framer Motion), it can do springs, layout animation and scroll effects that pure Tailwind classes cannot.
Watch out for: Every component brings the Motion runtime with it. If you only need a hover or a fade, a few Tailwind classes are lighter.
10. Aceternity UI: Best for bold hero effects for startup sites
Platform: React + Tailwind + Motion, free components and paid blocks
Aceternity UI lists 118+ components and 183+ blocks built with React, Tailwind CSS and Motion, installed through the shadcn CLI. Its components lean dramatic: 3D Card Effect, Background Beams, 3D Marquee, Wobble Card, Apple Cards Carousel and Hero Highlight are typical names.
The components are free; blocks come with a paid All-Access Pass. It is a fast way to get a hero that looks expensive for a launch page or a portfolio.
Treat it as a starting point. The effects are recognizable, so restyle colors, timing and copy until the page looks like yours.
Watch out for: Heavy hero effects can hurt Largest Contentful Paint and battery life on phones. Measure before and after, and offer a static fallback for prefers-reduced-motion.
11. Animata: Best for copy-paste animated widgets with no dependency to update
Platform: React components, MIT, copy-paste
Animata is a free, MIT-licensed collection of 157+ animated React components that you copy into your project instead of installing. "No npm install, nothing to update," as the site puts it.
Its 19 categories are broader than most kits: backgrounds, bento grids, buttons, cards, floating action buttons, graphs and charts, preloaders, progress, scroll, skeletons, tabs, text and widgets. That makes it useful for product UI, not just heroes.
Because the code lives in your repo, you own it: rename classes, swap colors for your design tokens and delete what you do not use.
Watch out for: Copy-paste means no updates. If a component has a bug or an accessibility gap, you fix it yourself, so read the code before it ships.
12. Our Tailwind versions in the directory: Best for copying a working Tailwind class string, no config
Platform: Motions directory, free Ours
More than 90 entries across our Loaders, Hover Effects and Text Animations come with a Tailwind CSS version next to the HTML and CSS: the same effect in utility classes, with no custom CSS or config. The Ring Spinner below, for example, is one div: h-12 w-12 animate-spin rounded-full border-4 border-blue-500/20 border-t-blue-500.
The rest of the directory is plain HTML and CSS with a prefers-reduced-motion guard and custom properties for colour and size, which drops into a Tailwind project as a normal stylesheet. There is also a separate Tailwind animations index.
Watch out for: Only some entries have a Tailwind version. Effects that need several keyframes or pseudo-elements are CSS only, because forcing them into arbitrary values makes unreadable class strings.
13. Our creator's Tailwind v4 export: Best for turning a described animation into an animate-* class
Platform: Motions creator, paid plans Ours
Describe an animation, or paste your own component's HTML or a screenshot, and the creator writes the keyframes. When you export, you can choose a Tailwind v4 @theme block (keyframes plus an --animate-* token, so you use class="animate-yourname") or a Tailwind v3 config snippet to merge into tailwind.config.js, as well as plain CSS.
That fills the gap the built-ins leave: they give you four animations, and everything custom has to be written by hand. You can try a full run free; copy, export, save and refine come with the plans. The Shine Sweep Button below shows the kind of effect people usually ask for.
Watch out for: Generated keyframes still deserve a review. Check durations against your design system and test the reduced-motion path before shipping.
How to choose a Tailwind animation approach
Start with the least you can get away with.
Match it to the job
Hover, focus and press states: transition utilities. Loading and live states: the four built-ins. One custom effect: an @theme keyframe. Enter and exit for menus and dialogs: tw-animate-css or Headless UI Transition. A whole animated hero section: a kit like Magic UI or Aceternity UI.
Match it to your Tailwind version
On v4 prefer CSS-first options: @theme keyframes, tw-animate-css and Tailwind CSS Animated all import as CSS. tailwindcss-animate and tailwindcss-motion document a v3 tailwind.config.js setup. If you are migrating, swap tailwindcss-animate for tw-animate-css first, as shadcn/ui did.
Match it to the cost
Classes and CSS cost almost nothing at runtime. Component kits built on Motion add a JavaScript runtime to every page that uses them. Whatever you choose, wrap looping animations in motion-safe: and give heavy effects a still fallback, so the page works for people who turn motion off.
Add one animation to your project today
Pick one place that would benefit, a save button, a notification dot or a dropdown, and use the smallest tool from this list that does it. For most projects that means a transition utility or a single @theme keyframe.
If you want something custom without writing the keyframes, copy a Tailwind version from our directory or describe the effect to the creator and export it as a v4 @theme block.
Write a Tailwind CSS v4 @theme block that adds an animate-pop-in utility. The element scales from 0.9 to 1 and fades in over 220 ms with cubic-bezier(0.34, 1.56, 0.64, 1), playing once. Include the @keyframes inside @theme and show an example on a toast: class="motion-safe:animate-pop-in". Under prefers-reduced-motion the toast appears with no animation.
Common questions
What animations does Tailwind CSS include by default?
Four, plus animate-none: animate-spin (1 s linear), animate-ping (scale and fade, for badges), animate-pulse (opacity fade, for skeletons) and animate-bounce (for scroll hints). Everything else comes from transition utilities, your own keyframes or plugins.
How do I add a custom animation in Tailwind v4?
In your CSS, inside @theme, declare --animate-name: name 1s ease-in-out infinite; and put the matching @keyframes name block in the same @theme. Tailwind then generates an animate-name class. No config file is needed.
Is tailwindcss-animate deprecated?
shadcn/ui deprecated it on March 19, 2025 in favor of tw-animate-css, a pure CSS replacement that works with Tailwind v4 and imports with one line. The original plugin still works in v3 config-based projects.
How do I respect reduced motion in Tailwind?
Use the motion-safe: variant to apply animations only when the user has not asked for reduced motion, for example motion-safe:animate-spin. Use motion-reduce: when you need to change something specifically for those users, such as hiding a spinner and showing text.
Can Tailwind animate elements when they appear?
Yes. Tailwind v4's starting variant maps to @starting-style, so classes like starting:open:opacity-0 with transition-discrete fade a popover in without JavaScript. Exits from unmounting components still need a helper such as Headless UI's Transition.
Sources
- Tailwind CSS: animation
- Tailwind CSS: transition-property
- Tailwind CSS: hover, focus and other states
- Tailwind CSS v4.0 release post
- shadcn/ui: Tailwind v4
- tw-animate-css on GitHub
- tailwindcss-animate on GitHub
- tailwindcss-animated on GitHub
- Rombo: tailwindcss-motion
- Headless UI: Transition
- Magic UI
- Aceternity UI
- Animata