Las clases transition-* controlan qu茅 propiedades del elemento deben animarse cuando
hay un cambio. Es necesario combinar estas clases con clases hover: o focus: para ver
sus efectos.
| Clase Tailwind | Equivalente CSS | Descripci贸n | Ejemplo |
|---|---|---|---|
transition-none |
transition: none; |
Desactiva todas las transiciones. |
Sin transici贸n
|
transition-all |
transition-property: all; |
Transici贸n de todas las propiedades disponibles. |
Todas las propiedades
|
transition |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
Transici贸n solo de propiedades comunes. |
Colores y b谩sicos
|
transition-colors |
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
|
Transici贸n solo de colores. |
Solo color
|
transition-opacity |
transition-property: opacity; |
Transici贸n solo de la opacidad. |
Solo opacidad
|
transition-shadow |
transition-property: box-shadow; |
Transici贸n solo de la sombra del elemento. |
Solo sombra
|
transition-transform |
transition-property: transform; |
Transici贸n solo de transformaciones (rotate, scale, etc.). |
Solo transform
|
transition-[border-radius] |
transition-property: border-radius; |
Transici贸n solo de border-radius |
Solo border-radius
|
Estas clases definen cu谩nto tiempo tarda una transici贸n en completarse. Afecta directamente la velocidad del efecto.
| Clase Tailwind | Equivalente CSS | Descripci贸n | Ejemplo |
|---|---|---|---|
duration-75 |
transition-duration: 75ms; |
Transici贸n muy r谩pida |
Hover
|
duration-150 |
transition-duration: 150ms; |
Transici贸n r谩pida |
Hover
|
duration-300 |
transition-duration: 300ms; |
Duraci贸n est谩ndar |
Hover
|
duration-700 |
transition-duration: 700ms; |
Transici贸n lenta |
Hover
|
duration-1000 |
transition-duration: 1000ms; |
Transici贸n muy lenta |
Hover
|
duration-[450ms] |
transition-duration: 450ms; |
Valor personalizado |
Hover
|
Las clases delay-* especifican cu谩nto tiempo espera una transici贸n antes de comenzar. Se usa para
crear efectos m谩s din谩micos y secuenciales.
| Clase Tailwind | Equivalente CSS | Descripci贸n | Ejemplo |
|---|---|---|---|
delay-75 |
transition-delay: 75ms; |
Peque帽o retardo |
Hover
|
delay-150 |
transition-delay: 150ms; |
Retardo medio |
Hover
|
delay-300 |
transition-delay: 300ms; |
Retardo largo |
Hover
|
delay-700 |
transition-delay: 700ms; |
Retardo muy largo |
Hover
|
delay-[250ms] |
transition-delay: 250ms; |
Valor personalizado |
Hover
|
Las clases ease-* definen la curva de aceleraci贸n de las transiciones, controlando c贸mo se acelera o
desacelera un cambio de estado.
| Clase Tailwind | Equivalente CSS | Descripci贸n | Ejemplo |
|---|---|---|---|
ease-linear |
transition-timing-function: linear; |
Transici贸n constante, sin aceleraci贸n ni desaceleraci贸n |
Hover
|
ease-in |
transition-timing-function: ease-in; |
Empieza lentamente y acelera al final |
Hover
|
ease-out |
transition-timing-function: ease-out; |
Empieza r谩pido y desacelera al final |
Hover
|
ease-in-out |
transition-timing-function: ease-in-out; |
Transici贸n suave al inicio y al final |
Hover
|
ease-[cubic-bezier(0.68,-0.55,0.27,1.55)] |
transition-timing-function: cubic-bezier(0.68,-0.55,0.27,1.55); |
Curva personalizada tipo "rebote" |
Hover
|