# Tailwind Animations — Playground > Live composition sandbox for `tailwind-animations` utilities. HTML UI: https://tailwind-animations.com/playground/ This markdown: https://tailwind-animations.com/playground.md Home (markdown): https://tailwind-animations.com/index.md ## What you can do 1. Pick an animation from 79 utilities 2. Tune duration, delay, steps, iteration, fill mode 3. Preview on presets: **box**, **button**, **card**, **text** 4. Copy the class list 5. Share the URL (query params encode state) ## Example share URLs ``` https://tailwind-animations.com/playground/?a=jelly&d=700&delay=100&i=infinite&p=card https://tailwind-animations.com/playground/?a=slide-in-bottom&d=slow&p=button https://tailwind-animations.com/playground/?a=fade-in-up&d=500&delay=200&f=both&p=text ``` ## Class composition ```html
…
``` ## Available animations - `blink` → class `animate-blink` - `blurred-fade-in` → class `animate-blurred-fade-in` - `bounce-fade-in` → class `animate-bounce-fade-in` - `bouncing` → class `animate-bouncing` - `contract-horizontally` → class `animate-contract-horizontally` - `contract-vertically` → class `animate-contract-vertically` - `dancing` → class `animate-dancing` - `expand-horizontally` → class `animate-expand-horizontally` - `expand-vertically` → class `animate-expand-vertically` - `fade-in` → class `animate-fade-in` - `fade-in-down` → class `animate-fade-in-down` - `fade-in-left` → class `animate-fade-in-left` - `fade-in-right` → class `animate-fade-in-right` - `fade-in-up` → class `animate-fade-in-up` - `fade-out` → class `animate-fade-out` - `fade-out-down` → class `animate-fade-out-down` - `fade-out-left` → class `animate-fade-out-left` - `fade-out-right` → class `animate-fade-out-right` - `fade-out-up` → class `animate-fade-out-up` - `flash` → class `animate-flash` - `flip-horizontal` → class `animate-flip-horizontal` - `flip-in-x` → class `animate-flip-in-x` - `flip-in-y` → class `animate-flip-in-y` - `flip-out-x` → class `animate-flip-out-x` - `flip-out-y` → class `animate-flip-out-y` - `flip-vertical` → class `animate-flip-vertical` - `flip-x` → class `animate-flip-x` - `flip-y` → class `animate-flip-y` - `float` → class `animate-float` - `hang` → class `animate-hang` - `heartbeat` → class `animate-heartbeat` - `horizontal-bounce` → class `animate-horizontal-bounce` - `horizontal-vibration` → class `animate-horizontal-vibration` - `impulse-rotation-left` → class `animate-impulse-rotation-left` - `impulse-rotation-right` → class `animate-impulse-rotation-right` - `jelly` → class `animate-jelly` - `jiggle` → class `animate-jiggle` - `jump` → class `animate-jump` - `pop` → class `animate-pop` - `pulse` → class `animate-pulse` - `pulse-fade-in` → class `animate-pulse-fade-in` - `pulsing` → class `animate-pulsing` - `roll-in` → class `animate-roll-in` - `roll-out` → class `animate-roll-out` - `rotate-180` → class `animate-rotate-180` - `rotate-360` → class `animate-rotate-360` - `rotate-90` → class `animate-rotate-90` - `rotate-in` → class `animate-rotate-in` - `rotate-out` → class `animate-rotate-out` - `rotational-wave` → class `animate-rotational-wave` - `rubber-band` → class `animate-rubber-band` - `scale` → class `animate-scale` - `shake` → class `animate-shake` - `sink` → class `animate-sink` - `skew` → class `animate-skew` - `skew-right` → class `animate-skew-right` - `slide-in-bottom` → class `animate-slide-in-bottom` - `slide-in-left` → class `animate-slide-in-left` - `slide-in-right` → class `animate-slide-in-right` - `slide-in-top` → class `animate-slide-in-top` - `slide-out-bottom` → class `animate-slide-out-bottom` - `slide-out-left` → class `animate-slide-out-left` - `slide-out-right` → class `animate-slide-out-right` - `slide-out-top` → class `animate-slide-out-top` - `slide-rotate-in` → class `animate-slide-rotate-in` - `slide-rotate-out` → class `animate-slide-rotate-out` - `slide-up-fade` → class `animate-slide-up-fade` - `spin-clockwise` → class `animate-spin-clockwise` - `spin-counter-clockwise` → class `animate-spin-counter-clockwise` - `squeeze` → class `animate-squeeze` - `sway` → class `animate-sway` - `swing` → class `animate-swing` - `swing-drop-in` → class `animate-swing-drop-in` - `tada` → class `animate-tada` - `tilt` → class `animate-tilt` - `vertical-bounce` → class `animate-vertical-bounce` - `wobble` → class `animate-wobble` - `zoom-in` → class `animate-zoom-in` - `zoom-out` → class `animate-zoom-out` ## Controls | Control | Class pattern | Keys | |---------|---------------|------| | Duration | `animate-duration-{key}` | 0, 100, 150, 200, 250, 300, 400, 500, 700, 800, 900, 1000, none, slower, slow, normal, fast, faster | | Delay | `animate-delay-{key}` | 0, 100, 150, 200, 250, 300, 400, 500, 700, 800, 900, 1000, none | | Steps | `animate-steps-{key}` | none, retro, normal, modern | | Iteration | `animate-iteration-count-{key}` | none, once, twice, thrice, infinite | | Fill | `animate-fill-mode-{key}` | none, forwards, backwards, both | ## Related - Package install + full docs: https://tailwind-animations.com/index.md - Full agent reference: https://tailwind-animations.com/llms-full.md - Source: https://github.com/midudev/tailwind-animations --- Generated from `tailwind-animations@1.0.2`