Curso gratuito de Tailwind CSS

Tailwind Demos

// transiciones · transform · animate

Transiciones & Animaciones

Transiciones CSS, transforms (scale, rotate, translate) y las animaciones incorporadas de Tailwind (spin, ping, pulse, bounce).

transition duration-* ease-* scale-* rotate-* animate-*

Demo en vivo — pasa el cursor

transition + duration

ease-* (curva de aceleración)

scale · rotate · translate

scale
rotate
-y-3
todo
skew

opacity

100
75
50
25
10

Animaciones nativas de Tailwind

animate-spin
animate-ping
animate-pulse
↓
animate-bounce

Código importante

<!-- transition: activa transición -->
transition         → all properties
transition-colors  → color, bg, border
transition-opacity → opacity
transition-shadow  → box-shadow
transition-transform → transform

<!-- duration en ms -->
duration-75   duration-100  duration-150
duration-200  duration-300  duration-500
duration-700  duration-1000

<!-- ease (curva) -->
ease-linear  ease-in  ease-out  ease-in-out

<!-- delay -->
delay-75  delay-150  delay-300  delay-500

<!-- Ejemplo completo -->
<button class="bg-blue-600
         hover:bg-blue-500
         transition-colors
         duration-200
         ease-out"></button>

<!-- Transform: scale -->
<div class="hover:scale-110 transition-transform"></div>
scale-0  scale-50  scale-75  scale-90
scale-95 scale-100 scale-105 scale-110 scale-125 scale-150

<!-- Transform: rotate -->
<div class="hover:rotate-45 transition-transform"></div>
rotate-0  rotate-1  rotate-2   rotate-3
rotate-6  rotate-12 rotate-45  rotate-90
rotate-180  -rotate-* (negativo)

<!-- Transform: translate -->
<div class="hover:-translate-y-2 transition-transform"></div>
translate-x-* translate-y-*  -translate-y-*

<!-- Animaciones nativas -->
<div class="animate-spin"></div>
<div class="animate-ping"></div>
<div class="animate-pulse"></div>
<div class="animate-bounce"></div>
<div class="animate-none"></div>